如何有选择地为具有两个对象数组的对象设置状态？答案

【问题标题】：How to selectively setState for an object with two array of objects?如何有选择地为具有两个对象数组的对象设置状态？
【发布时间】：2020-10-02 22:04:51
【问题描述】：

如何将新对象添加到数据中：[] 使用 setState() 进行以下代码或完全替换数据？？

    const [tableState, setTableState] = useState<TableState>({
    columns: [
      { title: "First Name", field: "firstName" },
      { title: "Last Name", field: "lastName" },
    ],
    data: [
      {
        firstName: "John",
        lastName: "Doe",
      },
      {
        firstName: "Jane",
        lastName: "Doe",
      },
    ],
  });

setState(prevState => ({...prevState.tableState, ???}))

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

您在hooks 和传统setState 之间混用。

从上面的代码中，您应该使用setTableState 函数来更新您的状态。

setTableState(prevState => ({
  ...prevState,
  data: [
    ...prevState.data,
    {
      firstName: 'New FirstName',
      lastName: 'New Last Name'
    }
  ]
}))

【讨论】：

【解决方案2】：

假设您有一个新用户，Joe Bloggs。它看起来像这样（请注意，setter 是 setTableState——您从 useState 获得的 setter——而不是 setState）：

setTableState(prevState => ({
    ...prevState, 
    data: [
        ...prevState.data, {
            firstName: "Joe",
            lastName: "Bloggs"
        }
    ]
}));

这是做什么的：

创建一个新对象，它是prevState 的浅拷贝，但是
有了新的data 属性，
有原始数据，加上新对象

但退一步说：那个状态项可能太复杂了。使用钩子和useState，您通常希望保持您的状态非常细粒度。在这种情况下，我认为至少有两个独立的状态项：

const [columns, setColumns] = useState<ColumnType[]>([
    { title: "First Name", field: "firstName" },
    { title: "Last Name", field: "lastName" },
]);
const [data, setData] = useState<DataType[]>([
    {
        firstName: "John",
        lastName: "Doe",
    },
    {
        firstName: "Jane",
        lastName: "Doe",
    },
]);

你会像这样设置新的data 状态：

setData(data => [
    ...data,
    {
        firstName: "Joe",
        lastName: "Bloggs"
    }
]);

【讨论】：