Javascript 按对象属性筛选对象数组在ReactJS中不起作用

我想通过生成的对象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=>{
返回(
this.handleDeleteTask（task.id）}
/>
);
})}

第一个问题是，

Array.prototype.splice

需要将要删除的项的索引作为第一个参数，而不是项本身。要改为查找索引，请将

this.state.tasks.find

更改为

this.state.tasks.findIndex

第二个问题是

splice

返回数组中已删除的部分，而不是新数组，因此您需要将状态设置为只包含已删除的项

也许更简单的方法是使用

Array.prototype.filter

删除不需要的项

handledeletask=id=>{
这是我的国家({
任务：this.state.tasks.filter（it=>it.id！==id）
})
}

第一个问题是，

Array.prototype.splice

需要将要删除的项的索引作为第一个参数，而不是项本身。要改为查找索引，请将

this.state.tasks.find

更改为

this.state.tasks.findIndex

第二个问题是

splice

返回数组中已删除的部分，而不是新数组，因此您需要将状态设置为只包含已删除的项

也许更简单的方法是使用

Array.prototype.filter

删除不需要的项

handledeletask=id=>{
这是我的国家({
任务：this.state.tasks.filter（it=>it.id！==id）
})
}

编辑以反映评论中的建议

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

---

编辑以反映评论中的建议

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

---

---

仍然会错误地设置状态，但也会改变原始设置为什么@charlietfl？注释仅基于更改为findIndex。。。然后，状态将是被删除的内容，而不是你想说的拼接阵列。

state

typo把我甩了。另一件事是josh需要更新状态克隆上拼接的答案，这样你就不会直接变异。尽管如此，仍然会错误地设置状态以及变异原始状态。为什么@charlietfl？注释仅基于更改为findIndex。。。然后，状态将是被删除的内容，而不是你想说的拼接阵列。

state

typo把我甩了。另一件事是josh需要更新状态克隆上拼接的答案，这样你就不会直接变异。答案的第二部分是不正确的。返回数组中的元素而不是索引。拼接采用固定的索引。谢谢你是的！可能也可以只使用findIndex进行一次迭代，而不是对同一事物进行两次扫描：）此外，我会更新答案的每个部分以克隆状态。。。即使

filter

返回一个新数组，但通常最好克隆state对象，这样就不会忽略和意外地改变state。无论如何，我+1:）已更新。谢谢你的建议。你回答的第二部分不正确。返回数组中的元素而不是索引。拼接采用固定的索引。谢谢你是的！可能也可以只使用findIndex进行一次迭代，而不是对同一事物进行两次扫描：）此外，我会更新答案的每个部分以克隆状态。。。即使

filter

返回一个新数组，但通常最好克隆state对象，这样就不会忽略和意外地改变state。无论如何，我+1:）已更新。谢谢你的建议。你不应该直接调用状态对象上的splice

this.state.tasks.splice

将改变状态，而是复制一个

const newtask=[…this.state.tasks]

然后在

newtask

变量上应用该拼接你不应该直接调用state对象上的splice

this.state.tasks.splice

将改变状态，而是复制

const newTasks=[…this.state.tasks]

然后对

newTasks

变量应用拼接