javascript - 使用 React 从列表中删除元素

Question

我有这个状态

this.state = {

    playerList: {
        player: [
            {
                playerAlias: [
                    {
                        name: null
                    }
                ],
                idPlayer: null,
                playerName: null,
                broadcastChannel: null,
                clusterName: null
            }
        ]
    }

}

我想要做的是从我的玩家列表中删除一名玩家。为此，我执行了以下操作:

deleteAliasToList = (player, alias) => {

    player.playerAlias.pop(alias)


    this.setState(prevState => ({
        ...prevState,
        playerList: {
            ...prevState.playerList,
            player: [...prevState.playerList.player, player]
        }
    }))

}

我已经用打印进行了测试，效果正常。

这是我在渲染页面时呈现的内容:

玩家的第一个名称由 {player.playerName} 表示，第二个名称也是相同的表示形式，但位于输入字段内:

                                    <input type="idPlayer" defaultValue={player.playerName} style={{ width: 100 + '%' }} onChange={this.handleChange} />

当我删除一个项目时，第一个名称删除成功，但输入字段中的名称有错误，我不知道为什么:

在上图中，我已经删除了玩家 A，正如你所看到的，它以玩家 B 开头，然后是 C 等等，但输入字段上的名称是 B、B、C、D 等，而不是 B ,C 类似于那些不在输入字段中的内容。

我真的不知道为什么会这样。提前致谢!

使用 rener 方法更新:

render() {

    this.state.playerList.player.map((pl) => {
        window.alert("render " + JSON.stringify(pl))
    })

    return (
        <div>
            <HeaderApp />
            <div className="container">
                <h1>Title</h1>
                {this.state.playerList.player.map((player) => {
                    return (
                        <div>
                            <GenericCard cardTitle="Player">
                                <button type="button" class="close" aria-label="Close" onClick={() => this.deletePlayer(player)}>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <br />
                                {player.playerName}
                                <input type="idPlayer" defaultValue={player.playerName} style={{ width: 100 + '%' }} onChange={this.handleChange} />

                         (....)

Answer 1

在渲染元素列表 https://reactjs.org/docs/lists-and-keys.html 时，您应该指定一个 key 属性

向 div 元素添加 key 应该可以解决删除包含不受控制的输入元素的列表中的元素的问题

{this.state.playerList.player.map((player) => {
     return (
        <div key={player.idPlayer}>

我认为idPlayer是独一无二的