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

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('');
};

在此处输入图像描述

标签： javascriptarraysreactjsobject

Answer 1

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

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

  setText("");
};