如何添加新项目到对象数组

Question

const data = [
{
title: 'Todo',
items: ['do home work', 'complete study'],
},
{
title: 'In-Progress',
items: ['learn tailwind', 'build some projects'],
},
{
title: 'Completed',
items: ['completed work'],
},
];

const [list, setList] = useState(data);
const [text, setText] = useState('');

这个addItem函数每次添加一个项目时都会添加一个新的Todo副本。如何在不添加新副本的情况下将项目添加到待办事项

const addItem = () => {
setList((prev) => {
return [
(prev[0] = {
...prev[0],
items: [text, ...prev[0].items],
}),
...prev,
];
});
setText('');
};

输入图片描述

Answer 1

这是一些有问题的设计选择，因为您假设您的todos对象始终是数组(prev[0])中的第一项，但直接前进是:

const addItem = () => {
setList((prev) => {
const [todoData, ...rest] = prev;
return [{ ...todoData, items: [...todoData.items, text] }, ...rest];
});
setText("");
};

Answer 2

你需要创建一个新对象，这就是react的工作原理。

React比较以前的状态和新的状态，然后决定是否需要重新呈现组件。React使用引用相等。如果你只是通过修改来保持使用相同的对象，那么React会认为没有必要重新渲染组件，因为状态对象总是相同的。

因此，您应该继续创建一个新实例，如下所示。

const addItem = (item) => {
setList((prev) => {
return {
...prev,
item
}
});
setText('');
};