React map功能未正确分配钥匙

Question

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

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

非常感谢！

Answer 1

试试这个：

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

Answer 2

密钥需要在最外层元素上，所以在片段上，而不是FeedCard上：

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

简写语法