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

Question

我有一个待办事项列表，其中包含孙子中的删除按钮，单击该按钮时会在父级中触发一个事件 - 我希望此事件删除与单击的孙子对应的数组条目。

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

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

有两个问题：

1. 你似乎试图直接修改this.state.tasks 。 重要的是不要这样做，永远不要直接修改this.state或其上的任何对象。 请参阅state 的 React 文档中的“不要直接修改状态” 。

2. 您正在将一个对象传递给从当前状态派生的setState 。 永远不要这样做也很重要。 :-) 相反，将setState传递给一个函数，并在调用该函数时使用它传递给您的状态对象。 来自文档中的“状态更新可能是异步的” ：

   因为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) {
    const newTaskArray = this.state.tasks.filter(task => task.name !== taskToDelete);
    this.setState({ tasks: newTaskArray });

}

编辑：解决方案的共同依赖： https ://codepen.io/Dyo/pen/ZvPoYP

Answer 4

您可以实现deleteTask方法如下：

deleteTask(taskToDelete) {
  this.setState((prevState, props) => {
    const tasks = [...prevState.tasks];
    const indexOfTaskToDelete = tasks.findIndex(
      task => task.name === taskToDelete
    );
    tasks.splice(indexOfTaskToDelete, 1);
    return { tasks };
  });
}

A. 找到taskToDelete的索引。

B. 然后使用splice方法从集合中删除项目

C. 然后调用setState用tasks更新状态。

Answer 5

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

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

this.setState({ tasks: updatedTasks });

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);
                }
            }
        }

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