如何將新項目添加到對象數組

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