从数组状态 ReactJS 中删除对象答案

【问题标题】：Removing a object from array state ReactJS从数组状态 ReactJS 中删除对象
【发布时间】：2021-06-17 11:19:33
【问题描述】：

我有一个功能组件，因为我有一个以对象为项目的数组状态。现在我想删除特定位置的项目。

const [tasks, setTasks] = useState([
    { project: "aaaa", task: "xxxxx", status: true },
    { project: "bbbb", task: "yyyyz", status: true },
    { project: "cccc", task: "zzzzz", status: true }

  ]);

  function addTask(task) {
    setTasks(oldArray => [...oldArray, task]);
  }

  function deleteTask(pos) {
    let _tasks = tasks;
    _tasks.splice(pos, 1);
    setTasks(_tasks)
  }

这里任务被删除，但 UI 不会更新，直到我向状态数组添加新项目。

【问题讨论】：

标签： arrays reactjs use-effect use-state

【解决方案1】：

这不会创建您的状态变量let _tasks = tasks; 的副本，而只是一个引用。因此，通过这样做，您将直接改变状态变量。您可以通过简单地执行以下操作来删除给定位置的元素：

  function deleteTask(pos) {
    setTasks(oldArray => oldArray.filter((item, index) => index !== pos));
  }

这假定pos 是一个整数，表示您要删除的元素的索引

【讨论】：