[英]react , missing unique key for map iteration
I'm getting an error that i'm missing key prop for my map iteration.Got confused where i'm missing one . 我收到一个错误,我错过了我的地图迭代的关键道具。我迷茫的地方,我错过了一个。 I have a map inside map.Could you please help me
我在地图里面有一张地图。请你帮我
displayData() {
const { data, index } = this.state;
let sortedData = data[index].settings.map((item, id) => {
const { _init_ } = item.settings;
return _init_.map((message, index) => {
const { message_content } = message;
return message_content === undefined ? null : (
<>
<div>
<div key={index} className="settings-message">
{message_content}
</div>
</div>
<div>yes</div>
</>
);
});
});
return sortedData;
}
The key should be on the parent div. 密钥应该在父div上。
return message_content === undefined ? null : (
<div key={index}>
<div className="settings-message">
{message_content}
</div>
</div>
)
Your top level component needs a unique key. 您的顶级组件需要一个唯一的密钥。 Use explicit fragment syntax and add the key to the fragment,
使用显式片段语法并将键添加到片段,
displayData() {
const { data, index } = this.state;
let sortedData = data[index].settings.map((item, id) => {
const { _init_ } = item.settings;
return _init_.map((message, index) => {
const { message_content } = message;
return message_content === undefined ? null : (
<React.Fragment key={index}>
<div>
<div className="settings-message">{message_content}</div>
</div>
<div>yes</div>
</React.Fragment>
);
});
});
return sortedData;
}
ps. PS。 You may have one more div than you actually need
您可能还有一个比您实际需要的div更多的div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.