如何在 ReactJs 的嵌套对象数组中设置状态？答案

【问题标题】：How to set state in nested array of objects in ReactJs?如何在 ReactJs 的嵌套对象数组中设置状态？
【发布时间】：2022-07-07 17:03:22
【问题描述】：

我在 reactjs 中有这个对象作为状态。我想在“childoptions: []”数组中添加另一个对象，该数组嵌套在按钮单击时的选项数组中。

我怎样才能做到这一点，请帮助...

  const [select1, setSelect1] = useState({
    id: uuid(),
    type: 'select',
    properties: {
      label: 'Select1',
      options: [
        // {
        //   id: uuid(),
        //   optionName: 'red ????',
        //   value: '',
        //   childOptions: [],
        // },
        // {
        //   id: uuid(),
        //   optionName: 'green ????',
        //   value: '',
        //   childOptions: [],
        // },
        // {
        //   id: uuid(),
        //   optionName: 'blue ????',
        //   value: '',
        //   childOptions: [],
        // },
      ],
    },
    parentId: null,
  });

【问题讨论】：

reactjs.org/docs/hooks-state.html

标签： reactjs arrays json react-hooks

【解决方案1】：

这可以通过在新状态下复制 prevState 并在选项数组中插入新对象来实现。

更详细的解释可以在https://stackoverflow.com/a/26254086/9095807找到

const newObject = {
   id: uuid(),
   optionName: 'blue ?',
   value: '',
   childOptions: [],
},

setSelect1((prevState) => {
  return {
    ...prevState,
    properties: {
      label: 'Select1',
      options: [...prevState.properties.options, newObject],
    }
  }
})

【讨论】：