React父组件State数组更新异常问题求助

问题描述 #

基于React开发游戏时，定义了两个数组状态：

const [mainBoard, setMainBoard] = useState(
    new Array(9).fill({ val: null, disabled: false })
);
const [miniBoard, setMiniBoard] = useState(
    new Array(9).fill({ val: null, disabled: false })
);

父组件遍历mainBoard渲染9个MiniBoard组件，每个MiniBoard遍历miniBoard渲染内容。当miniBoard满足特定条件时，调用传入的handleMainBoardChange更新mainBoard，但状态更新异常：第一次更新正常，后续更新时控制台显示数据已修改，但实际state并未更新。

最初的更新函数：

const handleMainBoardChange = (currentIndex, currentTurn) => {
    console.log("handleMainBoardChange ", currentIndex, currentTurn);
    const updatedmainBoard = {
      ...mainBoard[currentIndex],
      val: currentTurn,
      disabled: true,
    };
    console.log(updatedmainBoard);
    const newmainBoard = mainBoard.slice();
    newmainBoard[currentIndex] = updatedmainBoard;
    console.log(newmainBoard);
    setMainBoard(newmainBoard);
};

改用map方式更新后问题仍未解决：

const handleMainBoardChange = (currentIndex, currentTurn) => {
    const updatedNewMainBoard = mainBoard.map((item, index) => {
      if (index === currentIndex) {
        return { val: currentTurn, disabled: true };
      }
      return item;
    });
    console.log(updatedNewMainBoard);
    setMainBoard(updatedNewMainBoard);
};

问题根源 #

1. 数组初始化的致命错误 #

你使用new Array(9).fill({ val: null, disabled: false })初始化数组时，fill方法会将同一个对象引用填充到数组的所有9个位置。也就是说，数组里的每一个元素都指向同一个对象实例：

• 当你修改任意索引的对象属性时，所有元素的属性都会同步变化（因为是同一个对象）
• React依赖状态的引用变化来触发重渲染，这种情况下即使你修改了对象内容，数组元素的引用没有改变，React可能无法识别状态更新
• 后续更新时，因为所有元素共享同一个引用，会出现旧状态覆盖新状态的问题

2. 闭包导致的旧state引用 #

你的更新函数直接依赖了当前作用域中的mainBoard，当组件多次渲染后，闭包会捕获到旧的mainBoard引用，导致更新时基于旧状态进行修改，从而出现状态覆盖的问题。

解决方案 #

第一步：修复数组初始化方式 #

创建包含9个独立对象的数组，确保每个元素都是独立的引用：

// 方式1：使用Array.from
const [mainBoard, setMainBoard] = useState(
  Array.from({ length: 9 }, () => ({ val: null, disabled: false }))
);
const [miniBoard, setMiniBoard] = useState(
  Array.from({ length: 9 }, () => ({ val: null, disabled: false }))
);

// 方式2：先fill null再map生成新对象
const [mainBoard, setMainBoard] = useState(
  new Array(9).fill(null).map(() => ({ val: null, disabled: false }))
);

第二步：使用函数式更新状态 #

当状态更新依赖于之前的状态时，使用React的函数式更新，确保每次更新都基于最新的状态值：

const handleMainBoardChange = (currentIndex, currentTurn) => {
  setMainBoard(prevMainBoard => {
    return prevMainBoard.map((item, index) => {
      if (index === currentIndex) {
        // 返回新的对象，避免修改原对象引用
        return { val: currentTurn, disabled: true };
      }
      // 非目标索引直接返回原元素（如果后续需要修改其他属性，也要返回新对象）
      return item;
    });
  });
};

函数式更新中，prevMainBoard是React传入的最新状态快照，确保每次更新都基于当前最新的state，彻底避免闭包导致的旧状态引用问题。

内容的提问来源于stack exchange，提问作者Usman Khalid Mian