如何使用 filter() (reactjs) 删除一个项目

Question

I would like to delete an item from an item list using filter() . The function to delete the item is in a parent component that I then call in a child component.

here is the function of the parents component:

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

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

I pass this function in props:

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

I get it from my child:

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

and this is how I trigger the event:

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

I get the right id but filter() never filters and it finds all my objects. It's like he's ignoring the !== id

How can I do that?

Answer 1

This line is a problem:

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

filter returns a new array once the iterations are complete, it doesn't do the filtering in place. You need to assign that filtered array to a new variable. Since filter doesn't mutate the original state array you can just run the process on that to get the new filtered array which you can then log to the console.

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

Answer 2

The above answer is correct but within the react context you can do this:

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

The issue is that you are not updating the state using setState...

Answer 3

You are not updating the state of the teamPlayers , if you are using a functional component and useState , then I would recommend this.

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

  
}