Изменение значения глобальной переменной между повторным render и setState Function Breaks Breaks Breaks ⇐ Html

[Anonymous]

Обзор
Я строю пользовательский крючок в стиле реагирования, но вместо обновления существующего слота в моем массиве штата он продолжает добавлять новый. Я обнаружил, что сброс Indxg = -1 либо перед вызовом SetColor, либо после повторного render React сохраняет правильный порядок крюка, тогда как сброс между SetColor и повторным рендерингом разбивает последовательность. Я до сих пор не понимаю, почему сброс до того, как обновление работает, все же делая это между обновлением и повреждением поведения.
Неожиданный выход ['pink', 'red']
sstrong> main.jsx:

Код: Выделить всё

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

const root=createRoot(document.getElementById('root'))
root.render(


,
)
export default root

минимальный воспроизводимый пример :
corrupted code :

Код: Выделить всё

// Global state management
let m = [];
let indxg = -1;

function mystate(initial) {
indxg++;
const idx = indxg;

if (m[idx] === undefined) {
m[idx] = initial;
}

const setState = (newValue) => {
m[idx] = newValue;

};

return [m[idx], setState];
}

// Component Implementation (Broken)
function App() {
const [color1, setColor1] = mystate("blue");
const [color2, setColor2] = mystate("red");

const updateColor = () => {
setColor1("pink");
// PROBLEM: Reset AFTER state update indxg between setcol and render
indxg = -1;
root.render(); // Re-render on update
};

return (

Box 1
Box 2
Update

);
}

рабочее решение :

Код: Выделить всё

// Global state management
let m = [];
let indxg = -1;

function mystate(initial) {
indxg++;
const idx = indxg;

if (m[idx] === undefined) {
m[idx] = initial;
}

const setState = (newValue) => {
m[idx] = newValue;
root.render(); // Re-render on update
};

return [m[idx], setState];
}
function App() {
indxg=-1//at the top  of app component rest code same as before
**...**

ai Ответ, который я не мог понять :
" Причина заключается в том, что ваш пользовательский крюк полагается на глобальный indxg, чтобы назначить каждый вызов уникального слота в Mrray. React (и ваш STUB) ожидает, что вы называете в одном и том же порядке. рендеринг), вы сдвигаете свой крючок из синхронизации, поэтому новые слоты создаются, а старые никогда не используются -отсюда и дополнительные записи. /> вы логически предполагаете < /strong>: < /p>

[*] setcol ("pink") обновления m [0] < /p>
< /li>
indxg = -1 Стрекает < /p>
< />

0 < /p>
< /li>
< /ol>
Reality < /strong>: < /p>

Заброс происходит после того, как закрытие первого рендеринга создается // , если indxg = -1 предшествует транспортировке, его обновленное значение должно быть использовано ?? Это причина ошибки и путаницы

[*] Следующий рендер запускается с 0, но массив состояний уже содержит значения в индексах 0 и 1 из предыдущего рендеринга

. /> < /li>
< /ol>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -call-brea