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

【问题标题】：how to delete an item using filter() (reactjs)如何使用 filter() (reactjs) 删除一个项目
【发布时间】：2020-07-02 14:02:01
【问题描述】：

我想使用 filter() 从项目列表中删除一个项目。删除项目的函数在父组件中，然后我在子组件中调用。

这里是父组件的功能：

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

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

我在props中传递了这个函数：

  <//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

我该怎么做？

【问题讨论】：

标签： javascript reactjs crud

【解决方案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);

【讨论】：

不，我试过了，自从我的孩子有好 id 之后，我就有了日志，但是过滤器返回给我一个包含这个项目的表格
idTeam 的状态是整数还是字符串？组件的值是一个字符串，因此您可能必须将其转换为不同的类型。

【解决方案2】：

上面的答案是正确的，但在反应上下文中你可以这样做：

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

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

【讨论】：

【解决方案3】：

您没有更新 teamPlayers 的状态，如果您使用的是功能组件和 useState ，那么我会推荐这个。

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

  
}

【讨论】：