Question

我有一个todo列表，其中包含孙子中的删除按钮，当点击时触发父项中的事件 - 我希望此事件删除与点击的孙子对应的数组条目。

Parent（包含数组和我对函数的尝试）

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

// taskToDelete is the name of the task - doesn't contain an object
deleteTask(taskToDelete) {
    this.state.tasks.remove(task => task.name === taskToDelete);
    this.setState({ tasks: this.state.tasks });

}

任何帮助将不胜感激

Answer 1

那里有两个问题：

您似乎试图直接修改this.state.tasks。这样做非常重要，永远不要直接修改this.state或其上的任何对象。请参阅the React documentation for state中的＆＃34;不要直接修改状态＆＃34; 。
您正在将对象传递给从当前状态派生的setState。重要的是永远不要这样做。 :-)而是传递setState一个函数，并在调用该函数时使用它传递给你的状态对象。来自＆＃34;状态更新可能在the documentation中异步＆＃34; ：

由于this.props和this.state可能会异步更新，您不应该依赖其值来计算下一个状态 ... [而是] ...使用setState()的第二种形式，它接受一个函数而不是一个对象。

（我的重点）

我认为阵列上的remove是假设的，但为避免疑问，数组不具备remove方法。在这种情况下，最好的办法是，因为我们需要一个新数组，所以要使用filter删除所有不应该存在的条目。

所以：

deleteTask(taskToDelete) {
    this.setState(prevState => {
        const tasks = prevState.tasks.filter(task => task.name !== taskToDelete);
        return { tasks };
    });
}

Answer 2

你可以简单地过滤数组：

this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.name !== 'taskToDelete')
}));

此外，根据this.state进行更新时，最好使用函数表单，因为setState为async。

Answer 3

您可以按照以下方式实施deleteTask(taskToDelete) { this.setState((prevState, props) => { const tasks = [...prevState.tasks]; const indexOfTaskToDelete = tasks.findIndex( task => task.name === taskToDelete ); tasks.splice(indexOfTaskToDelete, 1); return { tasks }; }); }方法：

taskToDelete

一个。找到splice的索引。

B中。然后使用setState方法从集合中删除项目

℃。然后拨打tasks以{{1}}更新状态。

Answer 4

您可以使用higher order函数Array#filter删除任务。

let updatedTasks  =     this.state.tasks.filter(task => task.name !== taskToDelete);

this.setState({ tasks: updatedTasks });

Answer 5

您可以使用过滤器在不可变模式之后从数组中删除一个对象（过滤器将创建一个新数组）：

deleteTask(taskToDelete) {
    const newTaskArray = this.state.tasks.filter(task => task.name !== taskToDelete);
    this.setState({ tasks: newTaskArray });

}

编辑：解决方案的代码交付：https://codepen.io/Dyo/pen/ZvPoYP

Answer 6

我已按照以下步骤从状态数组中删除特定的选定对象：

这里我使用的是复选框列表，当我选择一个复选框时，它将添加到状态数组中，而当取消选中它时，它将被从数组中删除。

if (checked) {
            var tempObject = { checkboxValue: data, label: title }
            this.state.checkBoxState.push(resTemp);
        } else {
            var element = data; //data is coming from different method.
            for (let index = 0; index < this.state.checkBoxState.length; index++) {
                if (element === this.state.checkBoxState[index].checkboxValue) {
                    this.state.checkBoxState.splice(index, 1);
                }
            }
        }

我被这个问题困住了，我正在分享我的解决方案。希望对您有帮助。

如何使用对象属性从数组中删除对象 - React

6 个答案: