Question

我处于这种状态

this.state = {

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

}

我想要做的是从playerList中删除一个玩家。为此，我执行了以下操作：

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是唯一的

使用react

1 个答案: