[英]Each child should have a unique key prop
Im working on a react lobby for a card game that looks like this: Lobby Image我正在为一个看起来像这样的纸牌游戏制作反应大厅:大厅图片
Each name and "kick" button is a react component that I render based off of a list of names (ALL THE NAMES IN THIS LIST ARE UNIQUE).每个名称和“踢”按钮都是我根据名称列表呈现的反应组件(此列表中的所有名称都是唯一的)。 I figured that since the names are unique, I could use the names as a key, but for some reason i am getting the following error: Error Message
我认为由于名称是唯一的,我可以使用名称作为键,但由于某种原因,我收到以下错误:错误消息
What am I doing wrong here?我在这里做错了什么?
Note: I also tried doing key = {player + "1"} for the KickButton key to make it unique from its respective PlayerIcon but the error remains注意:我还尝试对 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
EDIT 1: Below is my new render function where the key is in the parent div, but the error is still there.编辑 1:下面是我的新渲染 function,其中密钥在父 div 中,但错误仍然存在。 Am I still misunderstanding?
我还是误会了吗?
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>
)
}
}
EDIT 2: I found the error...!!编辑2:我发现了错误......! this.props.players sometimes had 0 items so the key for the first item in players to render was undefinded i guess.
this.props.players 有时有 0 个项目,所以我猜播放器中第一个要渲染的项目的关键是未定义的。 Thank you for the help!
感谢您的帮助!
You can add an index that increments at every loop, and you use this index as a key to differentiate your elements from the loop您可以添加一个在每个循环中递增的索引,并使用此索引作为键来区分您的元素和循环
this.props.players.slice(1).map((player, index) =>
<div key={index} style={{display: "flex"}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.