React useState翻转布尔值时数组重置为初始值问题

你遇到的数组重置问题本质是对React组件渲染逻辑和状态机制理解有偏差，核心问题有2个：

1. itemList没有被声明为响应式状态，只是组件函数内的普通局部变量：
   你在组件顶层写的const itemList = new Array(9).fill("empty");，会在每次组件重渲染时重新执行，生成全新的全empty初始数组。当你调用setIsCross(!isCross)时，isCross状态变化会触发组件重渲染，之前你手动修改的itemList会被新生成的初始数组直接覆盖，这就是数组重置的直接原因。
   当你注释掉setIsCross(!isCross)时，点击按钮不会触发组件重渲染，当前渲染周期内的itemList改动还留在内存里没有被重新初始化，所以看起来异常消失了——但这只是巧合，只要有任何触发重渲染的操作（比如其他状态变更、父组件重渲染），你对itemList的改动都会直接丢失。
2. 直接修改原变量的写法不符合React的数据流要求：
   你写的itemList[index] = isCross ? "cross" : "circle"是直接对普通变量做原地修改，这种修改既不会被React跨渲染周期保留，也不会主动触发UI更新。你之前能观察到改动，完全是靠setIsCross顺带触发的重渲染，而重渲染本身又会重置未被状态托管的普通变量，自然就出现了改完就被重置的矛盾现象。

按照React的状态设计规范调整代码即可：

1. 把itemList改为用useState托管的响应式状态，保证它的值可以跨渲染周期保留
2. 更新数组时遵循不可变更新原则，不要直接修改原状态值，而是生成新的数组副本传给状态更新函数，触发正确的UI渲染

修正后的核心代码如下：

const App = () => {
  const [isCross, setIsCross] = useState(true);
  // 将itemList改为响应式状态
  const [itemList, setItemList] = useState(new Array(9).fill("empty"));

  const btnClicked = (index) => {
    if (itemList[index] === "empty") {
      // 基于原数组生成新的副本，不直接修改原状态
      const updatedList = [...itemList];
      updatedList[index] = isCross ? "cross" : "circle";
      // 更新列表状态后翻转落子标记
      setItemList(updatedList);
      setIsCross(!isCross);
    } else {
      alert("already filled...");
    }
  };

  // 其余JSX逻辑无需改动
  // ...
}

调整后，itemList的更新会被React托管，状态变化触发重渲染时不会丢失之前的赋值，落子和标记翻转的逻辑都可以正常执行。

内容的提问来源于stack exchange，提问作者Anil Khairnar