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

我有一个todo列表,在一个孙子列表中包含一个删除按钮,当点击该按钮时,会在父列表中触发一个事件–我想让这个事件删除对应于被点击的孙子列表的数组条目。

父代(包含数组和我的函数尝试)。

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

}

不胜感激

解决方案:

有两个问题。

  1. 你似乎想直接修改… this.state.tasks. 重要的是 要做到这一点,千万不要直接修改 this.state 或其上的任何物体。见 “不要直接修改国家”状态的React文档.

  2. 你把一个对象传给 setState 是由当前状态导出的。重要的是千万不要这么做。 :-) 相反,通过 setState 函数,并在调用该函数时使用它传递给你的状态对象。在调用该函数时,使用它传递给你的状态对象。“状态更新可能是异步的”文件:

    因为 this.propsthis.state 可以异步更新。你不应该依靠它们的值来计算下一个状态。… .[相反].使用第二种形式的。setState() 接受一个函数而不是一个对象。

    (我强调)

我想你的 remove 的目的是为了假设,但为了避免疑问,数组没有一个 remove 方法。在这种情况下,由于我们需要一个新的数组,最好的办法是使用 filter 来删除所有不应该还存在的条目。

所以,你可以简单地过滤数组:

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

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/725.html

(0)
上一篇 2022年6月29日 下午3:59
下一篇 2022年6月29日 下午3:59

相关推荐

发表评论

登录后才能评论