Javascript 如何使用filter（）删除项目（reactjs）

我想使用

filter（）

从项目列表中删除项目。 删除该项的函数位于父组件中，然后我在子组件中调用该父组件

以下是父组件的功能：

deletePlayer = (id) => {
    const teamPlayers = this.state.teamPlayers
    teamPlayers.filter(i => i.idTeam !== id)

    console.log('my players: ', teamPlayers);  
}

我在道具中传递此函数：

  <//other props...
   strNationality={player.strNationality}
   deletePlayer={(id) => this.deletePlayer(id)}
 /> 
))

这就是我触发事件的方式：

  <Button 
    onClick={ () => this.deletItem(this.props.idPlayer) } 
    className='button' 
    color='black' 
    type='submit'>

this.deletItem（this.props.idPlayer）}
className='button'
颜色：黑色
type='submit'>

我得到了正确的id，但是

filter（）

从不过滤，它会找到我的所有对象。就像他忽略了！==id

---

我该怎么做呢？

这一行有问题：

teamPlayers.filter(i => i.idTeam !== id)

filter

在迭代完成后返回一个新数组，但它不会执行适当的筛选。您需要将过滤后的数组分配给一个新变量。由于

filter

不会改变原始状态数组，因此您可以在该数组上运行该过程，以获取新的筛选数组，然后将其登录到控制台

const teamPlayers = this.state.teamPlayers.filter(i => i.idTeam !== id));
console.log('my players: ', teamPlayers);

---

上述答案是正确的，但在react上下文中，您可以这样做：

  deletePlayer = id => {
    this.setState({
      teamPlayers: this.state.teamPlayers.filter(
        player => player.idTeam !== id,
      ),
    });
  };

---

问题是您没有使用setState更新状态…

您没有更新TeamPlayer的状态，如果您使用的是功能组件和useState，那么我建议您这样做

deletePlayer = (id) => {
    
    setTeamPlayers(prevTeamPlayers =>prevTeamPlayers.filter(teamPlayer => teamPlayer.idTeam !== id))

  
}

---

不，我试过了，我有一个日志，因为我的孩子有一个好的id，但是过滤器返回给我一个表，在itIs

idTeam

中有这个项目，状态是整数还是字符串？组件中的值是字符串，因此您可能必须将其转换为其他类型。

deletePlayer = (id) => {
    
    setTeamPlayers(prevTeamPlayers =>prevTeamPlayers.filter(teamPlayer => teamPlayer.idTeam !== id))

  
}