Javascript 每个孩子都应该有一个唯一的钥匙道具

我正在为一款纸牌游戏制作react大厅，看起来像这样：

每个名称和“kick”按钮都是一个react组件，我根据名称列表（该列表中的所有名称都是唯一的）呈现该组件。我认为，由于名称是唯一的，我可以使用名称作为密钥，但由于某些原因，我得到以下错误：

我做错了什么

注意：我还尝试对KickButton键执行key={player+“1”}，使其与相应的PlayerIcon唯一，但错误仍然存在

import React from 'react';
import firebase from "./firebase.js";

class PlayerIcon extends React.Component{

    render() {
        return(
            <div>
                <h1>{this.props.name}</h1>
            </div>
        )
    }
}

class KickButton extends React.Component {
    constructor(props){
        super();
        this.state = {
            style: props.style,
            player: props.kicked,
            Lobbycode: props.Lobbycode
        }
        this.handleKick = this.handleKick.bind(this)
    }

    handleKick() {
        var firestore = firebase.firestore();  
        var docRef = firestore.doc("Games/Game " + this.state.Lobbycode);
        const confirmed = window.confirm("Do you want to kick " + this.state.player + "?");
        if (confirmed) {
            docRef.get()
                .then((docSnapshot) => {
                    if (docSnapshot.data().PlayerAmnt === 1) {
                        firestore.doc("Games/Active Games").update({
                            "Active Games" : firebase.firestore.FieldValue.arrayRemove(this.state.Lobbycode)
                        })
                        firestore.doc("Games/Game " + this.state.Lobbycode).delete();
                    } else {
                        docRef.update({
                            players : firebase.firestore.FieldValue.arrayRemove(this.state.player),
                            PlayerAmnt : firebase.firestore.FieldValue.increment(-1)
                        }) 
                    }
                })
            return;
        }
    }

    render(props) {
        return <button onClick = {this.handleKick} style = {this.state.style}>Kick</button>
    }
}

class HostLobbylist extends React.Component {

    render() {
        var playerstorender = [<div style={{display: "flex"}}><PlayerIcon key={this.props.players[0]} name={this.props.players[0]}/></div>].concat(
            this.props.players.slice(1).map(player => 
                <div style={{display: "flex"}}>
                <PlayerIcon key={player} name={player}/><KickButton key={player} kicked={player} style={{fontSize: "20px", height: "30px", verticalAlign: "middle", margin:"25px"}} Lobbycode={this.props.Lobbycode}/>
            </div>))

    return(
        <div>
            {playerstorender} 
        </div>   
    ) 
}
}

export default HostLobbylist

从“React”导入React；
从“/firebase.js”导入firebase；
类PlayerIcon扩展了React.Component{
render（）{
返回(
{this.props.name}
)
}
}
类KickButton扩展React.Component{
建造师（道具）{
超级（）；
此.state={
风格：道具，风格，
玩家：道具，踢，
游说代码：道具。游说代码
}
this.handleKick=this.handleKick.bind（this）
}
handleKick（）{
var firestore=firebase.firestore（）；
var docRef=firestore.doc（“游戏/游戏”+this.state.Lobbycode）；
const confirm=window.confirm（“您想踢“+this.state.player+”？”）；
如果（已确认）{
docRef.get（）
。然后（（docSnapshot）=>{
if（docSnapshot.data（）.PlayerAmnt==1）{
firestore.doc（“游戏/活动游戏”）.更新({
“活动游戏”：firebase.firestore.FieldValue.arrayRemove（this.state.Lobbycode）
})
firestore.doc（“Games/Game”+this.state.Lobbycode）.delete（）；
}否则{
docRef.update({
玩家：firebase.firestore.FieldValue.arrayRemove（this.state.player），
PlayerAmnt:firebase.firestore.FieldValue.increment（-1）
}) 
}
})
返回；
}
}
渲染（道具）{
回击
}
}
类HostLobbylist扩展了React.Component{
render（）{
var playerstorender=[].concat(
this.props.players.slice（1.map）（player=>
))
返回(
{playerstorender}
) 
}
}
导出默认HostLobbylist

编辑1：下面是我的新渲染函数，其中键位于父div中，但错误仍然存在。我还是误会吗

class HostLobbylist extends React.Component {

 render() {
     var playerstorender = [<div key={this.props.players[0]} style={{display: "flex"}}><PlayerIcon name={this.props.players[0]}/></div>].concat(
         this.props.players.slice(1).map(player => 
             <div key={player} style={{display: "flex"}}>
             <PlayerIcon name={player}/><KickButton kicked={player} style={{fontSize: "20px", height: "30px", verticalAlign: "middle", margin:"25px"}} Lobbycode={this.props.Lobbycode}/>
         </div>))

 return(
     <div>
         {playerstorender} 
     </div>   
 ) 
}
}

类HostLobbylist扩展了React.Component{
render（）{
var playerstorender=[].concat(
this.props.players.slice（1.map）（player=>
))
返回(
{playerstorender}
) 
}
}

---

编辑2：我发现了错误！！！！！this.props.players有时有0个项目，所以我想玩家中第一个要渲染的项目的键是未定义的。谢谢你的帮助

您可以添加在每个循环中递增的索引，并将此索引用作区分元素与循环的键

this.props.players.slice(1).map((player, index) => 
                <div key={index} style={{display: "flex"}}>

this.props.players.slice（1.map）（（玩家，索引）=>

键需要在return的父元素中，而不是在PlayerIcon组件上。

.map（player=>…

@pilchard我的编辑显示了我的新渲染，但错误仍然存在，我是否仍在做错事？

player

是对象还是字符串值？@HichamELBSI它是字符串value@HichamELBSI我发现了错误，谢谢你给我指出了正确的方向！索引作为键是一个糟糕的建议，只会导致h当数组的顺序发生变化时，eadaches会在稍后进行。另外，问题是OP将键放在子元素而不是父div上。在文档中也不建议这样做，除非作为最后的手段。没错！@pilchardI同意@pilchard。键应该是唯一的ID，而不是索引。您可以按照Marc编写的方法进行操作，并使用key进行改进={player.name}而不是索引，因为您有一个唯一的名称。如果他们从不重新排列数组中的项，例如排序，那么将索引用作键是没有问题的。