React中如何向嵌套状态对象的children数组添加新子元素

核心问题说明 #

你的代码存在两个明显问题：

1. 循环内多次调用setData属于冗余操作，针对固定的regions数组完全可以一次性处理完结构再更新state，性能更好
2. 之前的尝试都错误操作了children字段：要么把字符串直接赋值给数组类型的children，要么错误展开父级state/数组类型的children，要么每次直接覆盖数组而非追加内容

最优解决方案（推荐） #

直接批量转换regions的结构后一次性更新state，不需要循环：

// 初始children设为空数组，避免多余的空对象
const [data, setData] = useState({ name: "Tree", children: [] });

const regions = [
  {
    idregion: "region1",
    region_name: "South-Central Asia"
  },
  {
    idregion: "region2",
    region_name: "Balkan Peninsula"
  },
  {
    idregions: "region3",
    region_name: "Northern Africa"
  }
];
  
useEffect(() => {
  // 先把regions转成目标结构的数组
  const targetChildren = regions.map(reg => ({ name: reg.region_name }))
  setData(prevState => ({
    ...prevState,
    children: targetChildren
  }));
}, []);

如果需要保留初始children里的已有内容，把赋值语句改成children: [...prevState.children, ...targetChildren]即可。

如果你确实需要遍历过程中逐个追加（比如异步获取单条数据的场景） #

正确的追加写法如下：

useEffect(() => {
  for (let reg of regions){
    setData((prevState) => {
      return {
        ...prevState,
        // 展开原有children数组，再追加新的对象
        children: [...prevState.children, { name: reg.region_name }]
      };
    });
  }
}, []);

之前写法的错误原因 #

• 写法1：children: [{ ...prevState }, { name: reg.region_name }] → 错误把整个父级state（包含name、children属性）展开为子对象，结构完全不符合要求
• 写法2：children: [{ ...prevState, name: reg.region_name }] → 同样错误展开父级state，且每次直接把children替换为只有1个元素的数组，之前追加的内容全部丢失
• 写法3：children: [{ ...prevState.children, name: reg.region_name }] → prevState.children是数组，用对象展开语法处理会得到索引为键的特殊对象，结构完全错误，同样存在每次覆盖数组的问题

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