将新子对象添加到嵌套状态对象答案

【问题标题】：Add new child to nested state object将新子对象添加到嵌套状态对象
【发布时间】：2021-10-06 17:14:02
【问题描述】：

我想在 React 中创建一个树对象。我的初始状态有一个 name 变量和一个子对象数组。每次我遍历我的数据集时，我都想为我的子状态数组添加一个对象。

我的代码：

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(() => {
    for (let reg of regions){
      setData((prevState) => {
        return {
          ...prevState,
          children: reg.region_name
        };
      });
    }
  }, []);

我试过了：

setData((prevState) => {
        return {
          ...prevState,
          children: [{ ...prevState }, { name: reg.region_name }]
        };
      });

setData((prevState) => {
        return {
          ...prevState,
          children: [{ ...prevState, name: reg.region_name }]
        };
      });

setData((prevState) => {
        return {
          ...prevState,
          children: [{ ...prevState.children, name: reg.region_name }]
        };
      });

我的目标是：

{
  name: 'Tree',
  children: [
    { name: 'South-Central Asia' },
    { name: 'Balkan Peninsula' },
    { name: 'Northern Africa' },
  ],
}

【问题讨论】：

你试过children: [{ ...prevState.children}, {name: reg.region_name }]吗？我没有看到它列出来，我认为这会解决它

标签： javascript reactjs react-hooks use-state nested-object

【解决方案1】：

你可以这样做：

const [data, setData] = useState({ name: "Tree", children: [] });
  
  useEffect(() => {
    for (let reg of regions){
      setData((prevState) => {
        return {
          ...prevState,
          children: [...prevState.children, {name: reg.region_name}]
        };
      });
    }
  }, []);

但是，您可以通过像这样更新状态来做一些优化，而不是在 for 循环中设置状态：

useEffect(() => {
    const children = regions.map(item => ({ name: item.region_name }));
    setData((prevState) => ({ ...prevState, children }))
  }, []);

【讨论】：

【解决方案2】：

你可以这样做：

import React from "react";

const regions = [
  {
    idregion: "region1",
    region_name: "South-Central Asia",
  },
  {
    idregion: "region2",
    region_name: "Balkan Peninsula",
  },
  {
    idregions: "region3",
    region_name: "Northern Africa",
  },
];

const App = () => {
  const [data, setData] = React.useState({ name: "Tree", children: [{}] });

  const addRegions = () => {
    setData({ ...data, children: regions });
  };

  console.log(`data`, data);

  // can do it here
  // useEffect(() => {
  //   addRegions();
  // }, [])

  return (
    <div>
      <button onClick={addRegions}>Add regions</button>
    </div>
  );
};

export default App;

【讨论】：

【解决方案3】：

我认为这是您想要实现的目标：

function App() {
  const [data, setData] = React.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',
    },
  ];

  React.useEffect(() => {
    setData((prevState) => ({
      ...prevState,
      children: regions.map((r) => ({ name: r.region_name })),
    }));
  }, []);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

你真的不应该在循环中使用setState()。正如您在上面的示例中看到的那样，我遍历 regions 数组，使用 .map() 创建一个新数组并将返回的值分配给 children 属性。一次。

您可以使用.map() 创建一个新数组；对于数组中的每一项，返回一个新对象，其中name 是region_name。

【讨论】：

【解决方案4】：

您的数组传播运算符传播了错误的对象：

return {
    ...prevState,
    children: [
        ...prevState.children,     // Copy the previous children over
        { name: reg.region_name }, // Add a new object with name field
    ]
};

【讨论】：