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

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

This addItem function adding a new copy of Todo every time when I add an item. How can I add the item to the todo without adding a new copy

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

    setText('');
};

enter image description here

Answer 1

This is some problematic design choice since you assuming your todos object is always first item in the array ( prev[0] ), but going straight forward is:

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

  setText("");
};

Answer 2

You need to create a new object, this is how react works.

React compares the previous state and the new state, then decides to is there a need to re-render the component. And React uses referential equality. If you just keep using the same object by modifying it, then React will think that no need to re-render the component because of the state object is always the same.

So, you should keep creating a new instance like the following..

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

    setText('');
};