如何通过setState修改React数组中元素的score属性？

你之前的写法错误在于把数组当成对象来处理了——初始的data是数组类型，不是单个对象，所以用对象解构{ ...previousState }会把数组转成键为索引的对象，完全偏离了原本的结构，自然没法修改到数组里的对象属性。

下面是两种常用的正确实现方式：

方式一：修改指定索引的元素 #

如果明确知道要修改的元素索引，可以直接定位并更新：

const updateList = () => {
  setData(prevState => {
    // 浅拷贝原数组，创建新数组（避免直接修改原状态）
    const newData = [...prevState];
    // 浅拷贝目标对象，更新score属性
    newData[0] = { ...newData[0], score: 'Good' };
    return newData;
  });
};

如果要修改索引1的元素，把newData[0]换成newData[1]即可。

方式二：根据id修改（更灵活） #

如果数据可能发生排序、增删，用索引修改容易出错，推荐根据对象的唯一id定位修改：

const updateScore = (targetId, newScore) => {
  setData(prevState => 
    prevState.map(item => {
      // 匹配到目标id的对象时，复制并修改score；其他对象保持原样
      return item.id === targetId ? { ...item, score: newScore } : item;
    })
  );
};

// 调用示例：修改id为a1的score
updateScore('a1', 'Good');
// 修改id为a2的score
updateScore('a2', 'Excellent');

核心注意点 #

React要求状态更新必须是不可变操作：不能直接修改原状态数组或对象（比如prevState[0].score = 'Good'这种写法是错误的），必须返回新的数组/对象，这样React才能检测到状态变化并触发组件重新渲染。

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