如何使用React State Hook正确更新数组中的单个元素？

原代码问题 #

你的save函数中，setArray的map回调存在两处关键错误：

1. 满足条件时返回的是整个数组的拷贝[...e]，而非目标更新值info
2. 未满足条件时没有返回原元素，会导致数组中出现大量undefined
3. 额外问题：直接修改array[newIndex - 1] = info属于直接篡改状态数组，不符合React不可变更新原则，会导致组件无法正确重新渲染

修正后的代码片段 #

将原setArray部分替换为：

setArray((prevArray) => {
  return prevArray.map((item, index) => {
    // 匹配目标索引（newIndex从1开始，对应数组0基索引）
    if (index + 1 === newIndex) {
      return info;
    }
    // 不匹配时返回原元素，保持数组结构完整
    return item;
  });
});

同时必须删除这行直接修改状态的代码：

array[newIndex - 1] = info;

修正说明 #

• 用prevArray作为回调参数名，更清晰表示这是上一轮的状态数组
• 匹配到目标位置时，直接返回要更新的info值，完成单元素替换
• 增加默认返回原元素的逻辑，确保数组其他元素不受影响，避免出现undefined
• 移除直接修改状态的代码，遵循React不可变更新规则，保证状态更新能触发组件重新渲染

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