React中如何使用useState更新对象内部的数组？

在React里更新嵌套在对象中的数组，核心原则是不能直接修改原状态，必须通过创建新的对象和数组来更新，这样React才能检测到状态变化并触发重渲染。以下是几种常见的更新场景和实现方式：

1. 完全替换数组 #

如果需要直接把classes替换成一个全新的数组，可通过浅拷贝原对象并覆盖classes属性实现：

// 替换为新的课程数组
setcurrentUser(prevUser => ({
  // 拷贝原对象的所有属性
  ...prevUser,
  // 覆盖classes为新数组
  classes: ["math", "chemistry", "biology"]
}));

2. 向数组中添加新元素 #

基于原数组添加新元素时，要先拷贝原数组再追加新项：

// 添加一门新课程"biology"
setcurrentUser(prevUser => ({
  ...prevUser,
  classes: [...prevUser.classes, "biology"]
}));

3. 修改数组中的某个元素 #

通过map方法遍历原数组，替换目标元素，生成新数组：

// 将第一个课程改成"discrete math"
setcurrentUser(prevUser => ({
  ...prevUser,
  classes: prevUser.classes.map((course, index) => 
    index === 0 ? "discrete math" : course
  )
}));

4. 删除数组中的元素 #

使用filter方法过滤掉不需要的元素，生成新数组：

// 删除课程"calc 2"
setcurrentUser(prevUser => ({
  ...prevUser,
  classes: prevUser.classes.filter(course => course !== "calc 2")
}));

关键注意事项 #

• 禁止直接修改原状态：比如currentUser.classes.push("biology")这种写法会直接篡改原状态，React无法识别状态变化，还可能引发不可预测的bug。
• 优先使用函数式更新：当新状态依赖旧状态时，用prevUser => ...这种形式能确保拿到最新的状态值，避免因React状态更新的异步性导致的错误。
• 浅拷贝足够：如果对象和数组只有一层嵌套，用展开运算符...做浅拷贝就足够；如果是多层嵌套，需要深层拷贝（比如用JSON.parse(JSON.stringify(prevUser))），但尽量保持状态结构扁平化以简化更新逻辑。

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