![](/img/trans.png)
[英]Warning: Each child in an array or iterator should have a unique “key” prop.; key prop already added in li
[英]Each child in an array or iterator should have a unique “key” prop. React JS Error
我已經閱讀了其他有關此問題的答案,但無法理解。 我真的不確定在這種情況下將密鑰插入哪里
const recursivelyMapChildren = (node, index) => {
return (
node.children.map((child, i) => {
if (child.text) return child.text
const tag = child.tag
return React.createElement(
tag,
{
key: `${tag}-${index}-${i}`,
className: `text-block-${tag}`,
...child.attributes,
},
recursivelyMapChildren(child, index + 1)
)
})
)
}
const STTextBlock = ({ data }) => {
const textTag = data.content[0].tag
return (
<div className="text-block">
{
data.content.map(textBlock =>
React.createElement(
textTag,
{
className: `${textTag}`,
},
recursivelyMapChildren(textBlock)
)
)
}
<style jsx>{styles}</style>
</div>
)
}
任何幫助,將不勝感激!
您需要向初始數組映射添加鍵,還請參閱我在哪里添加UNIQUE_KEY_NEEDED_HERE_ALSO
。
const recursivelyMapChildren = (node, index) => {
return (
node.children.map((child, i) => {
if (child.text) return child.text
const tag = child.tag
return React.createElement(
tag,
{
key: `${tag}-${index}-${i}`,
className: `text-block-${tag}`,
...child.attributes,
},
recursivelyMapChildren(child, index + 1)
)
})
)
}
const STTextBlock = ({ data }) => {
const textTag = data.content[0].tag
return (
<div className="text-block">
{
data.content.map(textBlock =>
React.createElement(
textTag,
{
key: `UNIQUE_KEY_NEEDED_HERE_ALSO`
className: `${textTag}`,
},
recursivelyMapChildren(textBlock)
)
)
}
<style jsx>{styles}</style>
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.