时间戳

首页 > 解决方案 > 如何更改数组中对象中的数组？

reactjs - 如何更改数组中对象中的数组？

问题描述

我将 React 与 material-ui 框架一起使用。在文档中，有一个用芯片选择的例子，它是用一个数组制作的。在那里，他们以这种方式在数组中删除和添加值：

  const [personName, setPersonName] = React.useState([]);

  const handleChange = event => {
    setPersonName(event.target.value);
  };

我需要做同样的事情，但修改数组中的对象内的数组，如下所示：

const [data, setData] = React.useState([{ someData: 'data', array: [1,2,3] }]);

const handleChange = event => {
    setData(???);
  };

我在这里找到了一个可能的解决方案，但它对我不起作用。先感谢您。

标签： reactjsmaterial-ui

解决方案

您可以映射您的状态数组并在那里更新它

const [data, setData] = React.useState([{ someData: 'data', array: [1,2,3] }]);

const handleChange = event => {
   setData(() => {
      return data.map((item) => {
         return {
            ...item,
            array: [...item.array, event.target.value]
         } 
     })
   });
};

首先，您将遍历数组item中的每一个，并通过修改其中的每个对象data来返回一个新数组。dataitem

这是一个工作代码示例

推荐阅读