Question

我想使用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)}
 /> 
))

我从孩子那里得到了它：

 deletItem  = (e, id) => {
     console.log('mes propos player: ', this.props.idPlayer);
     this.props.deletePlayer(id)
 }

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

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

我得到了正确的ID，但是filter()从未进行过滤，并且找到了我所有的对象。就像他忽略了！== id

我该怎么做？

Answer 1

此行是一个问题：

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

一旦迭代完成，

filter将返回一个 new 数组，它不会进行适当的过滤。您需要将该过滤后的数组分配给新变量。由于filter不会改变原始状态数组，因此您可以在该状态上运行该过程以获取新的过滤后的数组，然后将其登录到控制台。

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

Answer 2

以上答案是正确的，但您可以在react上下文中执行以下操作：

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

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

Answer 3

您不会更新teamPlayers的状态，如果您使用的是功能组件和useState，那么我会建议这样做。

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

  
}

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

3 个答案: