从数组状态 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 是一个整数，表示要删除的元素的索引

从数组状态 ReactJS 中删除对象

Removing a object from array state ReactJS

arrays

reactjs

use-effect

use-state