React类组件中正确使用setState更新数组内对象属性的方法

嘿，我来帮你搞定这个React state更新的问题！你直接修改object3的属性其实已经改变了原数组里的对象，但React不会检测到这个变化——因为你没有改变state中数组的引用，直接修改内部对象属于可变操作，React依赖引用变化来触发重新渲染。

正确的做法是创建一个新的数组，在新数组中替换掉目标对象，再通过setState更新state。这里有两种常用的方式：

方法一：使用map遍历（推荐） #

map方法会返回一个新数组，我们只需要在遍历的时候，对匹配id=3的对象返回修改后的新对象，其他对象保持原样：

// 类组件写法
this.setState(prevState => ({
  arrayOfTests: prevState.arrayOfTests.map(test => {
    // 找到目标对象，返回新的对象（不要修改原对象）
    if (test.id === 3) {
      return { ...test, description: "new description" };
    }
    // 其他对象直接返回原引用即可
    return test;
  })
}));

// 函数组件（useState）写法
setArrayOfTests(prevState => prevState.map(test => {
  if (test.id === 3) {
    return { ...test, description: "new description" };
  }
  return test;
}));

这里用了函数式更新（prevState）是因为state的更新可能是异步的，依赖之前的state状态时，函数式更新能确保拿到最新的state值。{ ...test }展开运算符是为了复制原对象的所有属性，再覆盖description，这样不会修改原对象，保证了state的不可变性。

方法二：复制数组后替换目标元素 #

如果你已经知道目标对象的索引，也可以先复制整个数组，再替换对应位置的对象：

// 类组件写法
this.setState(prevState => {
  // 先复制原数组，创建新引用
  const updatedArray = [...prevState.arrayOfTests];
  // 找到目标对象的索引
  const targetIndex = updatedArray.findIndex(test => test.id === 3);
  
  if (targetIndex !== -1) {
    // 替换为新对象，同样不要修改原对象
    updatedArray[targetIndex] = { ...updatedArray[targetIndex], description: "new description" };
  }
  
  return { arrayOfTests: updatedArray };
});

这种方法和map的效果一致，但map的写法更简洁直观，推荐优先使用。

关键提醒 #

永远不要直接修改state中的对象或数组！比如object3.description = "new description"这种操作，虽然修改了数据，但React不会触发组件重新渲染，因为数组的引用没有变化。必须通过创建新的数组/对象来更新state，让React检测到引用变化，从而重新渲染组件。

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