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

【问题标题】：how can I add new item to objects array如何将新项目添加到对象数组
【发布时间】：2021-07-25 13:24:40
【问题描述】：

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

enter image description here

【问题讨论】：

您应该有一些 id 用于查找要向其中添加新项目的待办事项。喜欢addItem = (text, todoId)。

标签： javascript arrays reactjs object

【解决方案1】：

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

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

  setText("");
};

【讨论】：

【解决方案2】：

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

React 比较之前的状态和新的状态，然后决定是否需要重新渲染组件。 React 使用引用相等。如果你只是通过修改它来继续使用相同的对象，那么 React 会认为不需要重新渲染组件，因为状态对象总是相同的。

所以，你应该像下面这样继续创建一个新实例..

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

    setText('');
};

【讨论】：