反应地图功能没有正确分配键答案

【问题标题】：React map function not assinging keys properly反应地图功能没有正确分配键
【发布时间】：2022-01-15 06:27:38
【问题描述】：

由于某种原因，我在返回以下代码时收到“列表中的每个子项都应具有唯一键”错误。我不明白为什么会发生这种情况，因为我在映射期间专门分配了密钥：

return (
        <>
            {sortfeedCards(feedCards)}
            {loggedIn === true ? (feedCardsMod.map((card, index) => (
                <>
                    <p>{index}</p>
                    <FeedCard key={index} cardData={card} loggedIn={loggedIn} />
                </>
            ))) : ('')}
        </>
    )

这是渲染的样子。在我看来，索引变量确实有效：

提前非常感谢！

【问题讨论】：

标签： javascript reactjs key

【解决方案1】：

键需要在最外层的元素上，所以在 Fragment 上，而不是在 FeedCard 上：

feedCardsMod.map((card, index) => (
  <React.Fragment key={index}>
    <p>{index}</p>
    <FeedCard cardData={card} loggedIn={loggedIn} />
  <React.Fragment/>
))

（片段的简写语法<></> 不允许使用键，所以我切换到显式使用React.Fragment）

【讨论】：

【解决方案2】：

试试这个：

return (
    <>
        {sortfeedCards(feedCards)}
        {loggedIn === true ? (feedCardsMod.map((card, index) => (
            <div key={index}>
                <p>{index}</p>
                <FeedCard cardData={card} loggedIn={loggedIn} />
            </div>
        ))) : ('')}
    </>
)

键在封闭标签中必须是唯一的： https://reactjs.org/docs/lists-and-keys.html

【讨论】：

非常感谢您的快速帮助！这正是问题所在。