React中如何向useState管理的多字段元素数组push新元素

你定义状态的代码存在一处笔误：更新函数命名为setDate属于拼写错误，常规对应命名应为setData，以下示例统一使用setData作为状态更新函数名。 #

核心规则 #

React 状态更新必须遵循不可变原则：不能直接修改原状态的对象/数组引用，需要传入全新构造的状态对象，否则React无法识别状态变化，不会触发组件重渲染。
更新嵌套结构的状态时，每一层被修改的嵌套结构都要生成新的引用，未修改的字段直接保留原引用即可。 #

分场景实现代码 #

1. 仅向field1数组追加新元素 #

推荐使用函数式更新写法，自动获取最新的前序状态，避免闭包陷阱导致的旧状态覆盖问题：

// 准备要追加的元素，结构和数组内已有元素保持一致
const newItem = {
  f1: "你的自定义值1",
  f2: "你的自定义值2"
}

setData(prevState => ({
  // 先展开原状态的所有顶层属性，避免丢失field2等未修改的字段
  ...prevState,
  // 构造全新的field1数组：展开原有所有元素，末尾追加新元素
  field1: [...prevState.field1, newItem]
}))

2. 仅向field2数组追加新元素 #

const newItem = {
  f3: "你的自定义值3",
  f4: "你的自定义值4"
}

setData(prevState => ({
  ...prevState,
  field2: [...prevState.field2, newItem]
}))

3. 同时向field1、field2数组追加元素 #

setData(prevState => ({
  ...prevState,
  field1: [...prevState.field1, {f1: "值1", f2: "值2"}],
  field2: [...prevState.field2, {f3: "值3", f4: "值4"}]
}))

避坑说明 #

以下写法都是错误的，会导致更新不生效或状态丢失：

• 直接对原状态里的数组调用push/splice/pop等会修改原数组的方法，再把原状态对象传入setData，这种操作直接修改了原状态引用，React无法检测到变化
• 更新时没有展开原状态的其他属性，会导致未修改的字段（比如只更新field1时漏了field2）直接被清空
  如果你习惯使用push的写法，必须先对原数组做浅拷贝生成新数组，再对新数组执行push操作：

setData(prevState => {
  // 浅拷贝原field1数组生成新数组
  const newField1Arr = [...prevState.field1]
  // 操作新数组不会影响原状态
  newField1Arr.push({f1: "测试值", f2: "测试值"})
  return {
    ...prevState,
    field1: newField1Arr
  }
})

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