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