React中useState Hook修改状态变量后无响应问题排查

问题核心 #

React的useState Hook依赖状态引用的变化触发组件重新渲染。直接修改数组内对象的属性属于原地修改，数组本身的引用未发生改变，React会判定状态无更新，因此不会刷新页面。

第一种写法失效的原因 #

const clickFunc = ()=>{
    blocks[1].text = "Go Home";
    setBlocks(blocks);
    console.log(blocks);
}

这段代码仅修改了数组中对象的属性，但数组blocks的内存引用和初始状态完全一致。React对比前后状态时，发现引用未变，就会跳过重新渲染流程。虽然控制台能看到对象属性的变化（对象是引用类型，控制台会实时同步最新值），但组件并未重新渲染，所以页面无更新。

第二种写法生效的原因 #

const clickFunc = ()=>{
    blocks = [
      { text: "Hello", id: 1 },
      { text: "Go Home", id: 2 },
      { text: "Wassup", id: 3 },
      { text: "Last One", id: 4 }
    ];
    setBlocks(blocks);
    console.log(blocks);
}

这里重新创建了一个全新的数组，新数组的引用和原数组完全不同。React检测到状态引用发生变化，就会触发组件重新渲染，页面也就显示出更新后的内容。

正确的更新方式 #

遵循React不可变性原则，通过创建新数组/对象来更新状态，而非直接修改原状态：

方式1：展开原数组并修改目标项 #

const clickFunc = () => {
  // 展开原数组生成新数组，避免修改原状态
  const newBlocks = [...blocks];
  // 展开目标对象，仅修改text属性，保留其他属性
  newBlocks[1] = { ...newBlocks[1], text: "Go Home" };
  setBlocks(newBlocks);
};

方式2：使用map生成新数组（适合按条件修改） #

const clickFunc = () => {
  const newBlocks = blocks.map(block => {
    // 匹配id为2的项，返回修改后的新对象，其余项保持原样
    return block.id === 2 ? { ...block, text: "Go Home" } : block;
  });
  setBlocks(newBlocks);
};

总结 #

React状态更新必须保证不可变性：

• 数组：不要直接修改原数组元素，通过展开运算符...、map、filter等方法创建新数组
• 对象：不要直接修改原对象属性，通过展开运算符...创建新对象

只有当状态的引用发生变化时，React才会识别到状态更新，进而触发组件重新渲染。

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