React中如何更新数组状态：仅修改单个元素保留其余值

当然有更简洁的方式，而且必须遵循React状态不可变的原则——直接修改原数组（比如BoardState[0] = changed item）不会触发组件重渲染，还会导致状态管理混乱。下面是两种常用的正确做法：

方法一：展开运算符复制数组后修改 #

先通过展开运算符...复制原数组的所有元素，再修改指定索引的元素，最后传入setBoardState：

// 更新索引为2的元素
const newBoardState = [...BoardState];
newBoardState[2] = 'changed item';
setBoardState(newBoardState);

如果想写得更紧凑，推荐用函数式更新（尤其适合依赖旧状态的场景，避免异步更新导致的旧值问题）：

setBoardState(prevState => {
  const newArr = [...prevState];
  newArr[2] = 'changed item';
  return newArr;
});

方法二：使用map方法遍历替换 #

通过map遍历数组，匹配到目标索引时返回新值，其余元素保持原样：

// 更新索引为2的元素
setBoardState(prevState => 
  prevState.map((item, index) => 
    index === 2 ? 'changed item' : item
  )
);

这种方法不仅适用于单个元素更新，还能轻松扩展到批量更新（比如替换所有满足条件的元素）。

关键注意点 #

• 永远不要直接修改原状态数组，必须返回一个新的数组引用，React才能检测到状态变化并触发重渲染。
• 当更新逻辑依赖之前的状态时，一定要用函数式更新（即setBoardState接收一个函数，参数是最新的前序状态），避免因为React状态更新的异步性导致的错误。

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