javascript - 按对象属性过滤对象数组在 ReactJS 中不起作用

Question

我想通过生成的对象 ID 从数组中删除一个对象。

我已经尝试过多种解决方案，但没有任何效果。

处理函数:

  handleDeleteTask = id => {
    const task = this.state.tasks.find(i => {
      return i.id === id;
    });

    const newTasks = this.state.tasks.splice(task, 1);
    this.setState({ tasks: newTasks });
  };

JSX:

  {this.state.tasks.map(task => {
          return (
            <Task
              key={task.id}
              task={task.text}
              title={task.title}
              deleteTask={() => this.handleDeleteTask(task.id)}
            />
          );
      })}

Answer 1

编辑以反射(reflect)评论中的建议

splice 返回移除的部分。您可以改用过滤器:

  handleDeleteTask = id => {

    const newTasks = [...this.state.tasks].filter(x => x.id !== id);
    this.setState({ tasks: newTasks });
  };

或者将原状态展开，拼接副本设置为新状态

  handleDeleteTask = id => {
    const task = this.state.tasks.findIndex(i => {
      return i.id === id;
    })

    const newTasks = [...this.state.tasks]
    newTasks.splice(task, 1)
    this.setState({ tasks: newTasks });
  };

其实这可以写成一行

const removeById = id => this.setState({tasks: [...this.state.tasks].filter(x=> x.id !== id)})