arrays - 从数组状态ReactJS中删除一个对象

Question

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

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 不会更新，直到我将新项目添加到状态数组。

Answer 1

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

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

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