我知道这个问题有很多答案,但我找不到一个能完全解决我问题的答案。我得到以下错误:警告:数组或迭代器中的每个子级都应该有一个唯一的“key”属性。检查QuestionItem的呈现方法。看见https://fb.me/react-warning-keys了解更多信息
我正在为组件设置一个键,但我无法得到要消失的警告。
主要组成部分:
renderData() {
return this.state.data.map((data) => {
return (
<QuestionItem key={data._id} data={data} delete={this.deleteItem} edit={this.editItem} />
)
})
}
问题项目组成部分:
import React, { Component, PropTypes } from 'react';
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardMedia from 'material-ui/lib/card/card-media';
import CardTitle from 'material-ui/lib/card/card-title';
import FlatButton from 'material-ui/lib/flat-button';
import CardText from 'material-ui/lib/card/card-text';
import Delete from 'material-ui/lib/svg-icons/action/delete';
import ModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
import IconButton from 'material-ui/lib/icon-button';
import Button from '../UI/Button';
class QuestionItem extends Component {
renderTags() {
return this.props.data.tag.map((tag) => {
return (
<FlatButton label={tag} />
)
})
}
renderCompany() {
return this.props.data.company.map((company) => {
return (
<FlatButton label={company} />
)
})
}
edit = () => {
this.props.edit(this.props.data);
}
delete = () => {
this.props.delete(this.props.data._id);
console.log(this.props.data._id);
}
render() {
return (
<Card style={{margin: 50}}>
<CardTitle title={this.props.data.text} />
<CardText>
{this.props.data.answer}
</CardText>
<CardActions>
{ this.renderTags() }
{ this.renderCompany() }
<IconButton onClick={this.delete} style={{float: 'right'}}>
<Delete />
</IconButton>
<IconButton onClick={this.edit} style={{float: 'right'}}>
<ModeEdit />
</IconButton>
</CardActions>
</Card>
)
}
}
export default QuestionItem;
我错过了什么?
在renderTags()
和renderCompany()
中,迭代器没有键。
您需要注销数据_id
并验证它们是否都是唯一的。或者您可以这样做:
renderData() {
return this.state.data.map((data, index) => {
return (
<QuestionItem key={index} data={data} delete={this.deleteItem} edit-{this.editItem} />
);
});
}
正如另一个答案所指出的,对map
的其他调用需要将key
prop设置为唯一值。
因此,这些:
renderTags() {
return this.props.data.tag.map((tag) => {
return (
<FlatButton label={tag} />
)
})
}
renderCompany() {
return this.props.data.company.map((company) => {
return (
<FlatButton label={company} />
)
})
}
应成为:
renderTags() {
return this.props.data.tag.map((tag, index) => {
return (
<FlatButton key={index} label={tag} />
);
});
}
renderCompany() {
return this.props.data.company.map((company, index) => {
return (
<FlatButton key={index} label={company} />
);
});
}
请注意,我们使用的index
是数组索引。它基本上就像SQL中的合成标识符。如果您实际渲染的内容已经具有唯一标识符,那么最好使用这些标识符!例如,标记的key
prop可以只是标记字符串本身。key
prop支持多种类型:
react-节点和元素:
key:string | boolean | number | null,
因此,如果您的标记是唯一的(我希望它们是唯一的,但显然不想假设),您可以这样做:
renderTags() {
return this.props.data.tag.map((tag) => {
return (
<FlatButton key={tag} label={tag} />
);
});
}
你可能会考虑做一些类似于(标记 || '').toLowerCase()。替换(' ', ' _)
但是我认为React已经在那里做了一些操作(除了潜在的字符案例)。所以仅仅传递标签本身应该很好!如果您没有运行摆脱它的版本(我认为0.15摆脱了它),您可以检查DOM以查看data-reactid
。React开发工具可能允许您使用0.15检查密钥。
使现代化
我不建议使用数组索引作为键。它会引起微妙的错误。要在实际操作中看到这一点,请创建一个对象数组,使用数组索引渲染它们,然后通过移除第二个元素(并确保再次进行React渲染)来修改数组。现在索引与相同的对象不对应。我的建议是始终为唯一值设置一个键。在开发过程中,最好在找到键之前不要设置键,而不要使用数组索引,因为控制台上的错误会提醒您在部署/提交更改之前修复此问题。
我收到此错误消息,尽管我的列表元素确实有一个键:( 反应js:18745警告:数组或迭代器中的每个子级都应该有一个唯一的“key”属性。检查
我的控制台出现错误, 我的JSON在这里https://dev.justinblayney.com/wp-content/uploads/2020/12/main-menu.json_.zip 警告:列表中的每个孩子都应该有一个唯一的“键”道具。 在我的页面上显示的是(所以他们都是独一无二的,所以WTF反应) 钥匙:2429钥匙:2430钥匙:3859钥匙:2421钥匙:2802钥匙:2428 另
我正在为一个看起来像这样的纸牌游戏制作一个反应大厅:大厅图像 每个名称和“kick”按钮都是一个react组件,我根据名称列表(该列表中的所有名称都是唯一的)呈现该组件。我认为,由于名称是唯一的,我可以使用名称作为键,但由于某些原因,我得到以下错误:错误消息 我做错了什么? 注意:我还尝试了为KickButton键做key={Player"1"},以使其与相应的PlayerIcon唯一,但错误仍然
我正在研究使用Hibernate 4.1.9注释地图的不同方法 如果我想存储一个Map,其中键是实体值的属性,标记如下所示 请注意,上面的标记不会创建连接表,而是在运行时通过查询返回Map,因此Map是动态的,您不必在map中添加元素Java查询返回它们。 现在,我希望地图的内容反映应用程序添加到地图中的内容,而不是执行动态查询。 我想储存4种不同的地图 在这些情况下,键之间没有关系 我尝试了以下
Targets key To be discussed in order to avoid _Warning: potential malicious behavior - trust data has insufficient signatures for remote repository .dkr.ecr.us-east-1.amazonaws.com/app: valid signatur
Snapshot key To rotate the snapshot key: ❯ notary -D -v -s https://127.0.0.1:4443 -d ~/.docker/trust key rotate <aws_account_id>.dkr.ecr.us-east-1.amazonaws.com/app snapshot -r Enter passphrase for ne