React 地图功能未正确分配键

Question

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

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

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

非常感谢！

Answer 1

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

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

（片段的 shorthand 语法 <></> 不允许键，所以我明确地切换到使用 React.Fragment）

Answer 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

React 地图功能未正确分配键

React map function not assinging keys properly

javascript

key

reactjs