映射警告时反应唯一键
Posted
技术标签:
【中文标题】映射警告时反应唯一键【英文标题】:React unique key when mapping warning 【发布时间】:2018-03-07 09:09:37 【问题描述】:我对反应还很陌生,我面临着一个我无法解决的问题。这是我的反应组件:
import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';
class App extends React.Component
state =
pageHeader: 'Naming Contests',
whatever: 'test'
;
render()
return (
<div className="App">
<Header message=this.state.pageHeader />
<div>
this.props.contests.map(contest =>
<ContestPreview key=contest.id ...contest />
)
</div>
</div>
);
export default App;
此代码给我以下警告:
警告:数组或迭代器中的每个子元素都应该有一个唯一的“键” 支柱。检查
App
的渲染方法。看 此处-FB-URL-I-已删除以获取更多信息。 在 ContestPreview 中(由 App 创建) 应用内
我完全理解这个错误的含义。我知道数组的每个元素在循环遍历它们时都应该有一个唯一的键。我不明白为什么会出现错误,因为在我看来,密钥应该用我的<ContestPreview key=contest.id ...contest />
定义……key=contest.id
不够吗?
这是我的比赛数据:
"contests": [
"id": 1,
"categoryName": "Business/Company",
"contestName": "Cognitive Building Bricks"
,
"id": 2,
"categoryName": "Magazine/Newsletter",
"contestName": "Educating people about sustainable food production"
,
"id": 3,
"categoryName": "Software Component",
"contestName": "Big Data Analytics for Cash Circulation"
,
"id": 4,
"categoryName": "Website",
"contestName": "Free programming books"
]
在我看来它应该可以工作,我不明白为什么我仍然会收到这个错误。我真的很想在我的问题上得到一些帮助,如果有人能解释一下这里发生了什么,那就太酷了,因为我真的想了解它是如何工作的。
感谢您的帮助! :)
【问题讨论】:
您能否检查任何时间点的数据是否为 undefined 或 null 是否有任何答案可以帮助您解决问题? @spencer.sm 不,但我自己解决了。我重新启动了整个服务器,仍然一样。所以我有点生气,决定关闭我的电脑一个小时。重新启动后,它工作得很好。不知道它是什么,认为有些东西没有正确加载。 【参考方案1】:我可以想到两种解决方法...
第一种方法是将键添加到周围的 div 中,而不是直接添加到 ContestPreview
元素上。
<div>
this.props.contests.map(contest =>
<div key=contest.id><ContestPreview ...contest /></div>
)
</div>
第二种方法是修改ContestPreview
,使其实际使用key
属性。
render()
<div key=this.props.key>
...
</div>
【讨论】:
【参考方案2】:将包装器用于渲染每个对象的属性。
<div>
this.props.contests.map(contest =>
<div key=contest.id>
<ContestPreview ...contest />
</div>
)
</div>
【讨论】:
【参考方案3】:在您的代码中
<div className="App">
<Header message=this.state.pageHeader />
<div>
this.props.contests.map(contest =>
console.log('contest id =', contest.id);
return (<ContestPreview key=contest.id ...contest />);
)
</div>
</div>
这将控制您在地图中呈现的每个组件的 id(key)。我认为出于某种原因,在您的对象数组中,您有一个具有相同键的对象。
这样当你看到 console.log() 结果时。你会知道你的对象中哪里有错误。
我希望这可以帮助您调试错误。
【讨论】:
以上是关于映射警告时反应唯一键的主要内容,如果未能解决你的问题,请参考以下文章
反应警告:数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查`App`的渲染方法
警告:列表中的每个孩子都应该有一个唯一的“关键”道具。反应.js