如何向React状态中嵌套的children数组内添加值？

在React中更新包含数组的状态时，必须遵循不可变更新原则，不能直接修改原状态对象或数组。针对你的场景，要把另一个状态的数据推入formValues的children数组，可按以下方式操作：

1. 推入整个数组（另一个状态是数组类型） #

假设你有另一个状态anotherData，存储着要添加的批量数据：

const [anotherData, setAnotherData] = useState([
  // 这里是和children元素结构一致的数据
  { name: "子项1", key: uniqueKey() },
  { name: "子项2", key: uniqueKey() }
]);

// 更新formValues的children数组
setFormValues(prevState => ({
  // 保留原状态的所有其他属性
  ...prevState,
  // 合并原children和anotherData数组，生成新数组
  children: [...prevState.children, ...anotherData]
}));

2. 推入单个数据项（另一个状态是单个对象） #

如果另一个状态singleItem是单个符合children结构的对象：

const [singleItem, setSingleItem] = useState({
  name: "新子项",
  key: uniqueKey(),
  // 其他匹配children元素的属性
});

// 更新formValues的children数组
setFormValues(prevState => ({
  ...prevState,
  // 将单个项添加到原children数组末尾
  children: [...prevState.children, singleItem]
}));

注意事项 #

• 确保推入的数据结构和children数组中现有元素的结构完全一致，否则表格树形视图可能无法正常渲染。
• 必须通过setFormValues的回调函数获取最新的prevState，避免因状态异步更新导致的错误。

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