React状态更新时所有嵌套数组被意外修改而非仅更新目标数组问题

架构老林

2026-8-27

问题根源

初始化逻辑存在引用复用问题：Array.fill() 传入引用类型值（数组、对象等）时，不会为每个位置创建新的副本，所有填充位都会指向同一个内存地址的实例。你的代码中Array(5).fill(emptyWord)执行后，外层数组的5个子数组其实是同一个数组的引用，修改任意一个子数组的内容，其余子数组都会同步变化。
更新逻辑违反React state不可变原则：const currWords = words 仅复制了state的引用，没有创建新的数组副本，直接修改currWords[0][2]属于直接篡改原始state，会导致React状态比对失效，出现不符合预期的更新结果。

修复方案

调整初始化逻辑，为每个子数组创建独立实例，禁止用fill直接填充引用类型值：

function App() {
  // 外层fill传null占位，通过map为每个位置生成独立的空数组
  const initialArr = Array(5).fill(null).map(() => Array(5).fill(""));
  const [words, setWords] = useState(initialArr);
  // 其余原有逻辑
}

更新state时做两层浅拷贝，全程不修改原始state值：

const handleInput = input => {
  setCurrLetter(input);
  // 基于prevState更新，避免闭包导致的state值过时问题
  setWords(prevWords => {
    // 拷贝外层数组
    const newWords = [...prevWords];
    // 单独拷贝要修改的目标子数组，切断和原数组的引用关联
    newWords[0] = [...newWords[0]];
    // 修改对应位置的值
    newWords[0][2] = input;
    return newWords;
  })
}