每个孩子都应该有一个独特的钥匙道具

Question

我正在为一个看起来像这样的纸牌游戏制作一个反应大厅：大厅图像

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

我做错了什么？

注意：我还尝试了为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

编辑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>   
 ) 
}
}

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

Answer 1

您可以添加一个在每个循环中递增的索引，并使用该索引作为键来区分元素与循环

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