如何为具有两个对象数组的对象选择性地设置State

Question

如何向数据中添加新对象：[]对以下代码使用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, ???}))

Answer 1

您正在混合使用hooks和传统的setState。

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

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

Answer 2

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

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

它的作用：

1. 创建一个新对象，该对象是prevState的浅拷贝，但

2. 有了新的data属性，

3. 具有原始数据，加上新对象

---

但退一步说：那个状态项可能太复杂了。使用hook和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"
}
]);