React中useState存储对象数组，调用更新函数未生效求原因解析

原因分析 #

你直接修改了prev数组内的对象属性，这种操作违反了React的不可变更新规则。React判断状态是否需要更新的核心依据是引用是否发生变化：你修改的是原数组中对象的属性，但数组本身的引用没有改变，返回的还是原来的数组对象。React会认为状态没有发生变化，因此不会触发组件重新渲染，导致你的修改看起来没有生效。

正确的更新方式 #

必须创建新的数组（或新的对象），让状态的引用发生变化，React才能检测到更新。以下是两种常用的正确写法：

方式一：展开数组+复制目标对象

setCharacters(prev => {
  // 展开原数组生成新数组，避免直接修改原引用
  const newCharacters = [...prev];
  // 复制第3个元素（索引为2），修改bool属性后替换原位置的元素
  newCharacters[2] = { ...newCharacters[2], bool: true };
  return newCharacters;
});

方式二：使用map遍历更新

setCharacters(prev => 
  prev.map((item, index) => 
    // 仅对目标索引的元素进行复制修改，其余元素保持原引用
    index === 2 ? { ...item, bool: true } : item
  )
);

这两种写法都遵循了不可变原则，通过创建新的数组/对象改变了状态引用，React会正确识别状态变化并触发组件重新渲染，你的修改就能正常生效了。

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