我的孩子补偿缺少的钥匙在哪里？

Question

我遇到了“列表中的每个孩子都应该有一个唯一的 key prop”错误。我已经阅读了文档并输入了密钥，但没有运气。不知道我误会了什么！

blogPosts 是从上下文中导入的。 被称为键的 id 是唯一的（POSTID1、POSTID2、...等）。 为了更好的可读性，去掉了一些类名。

const topicPosts = blogPosts.filter((post)=>post.topic.toLowerCase()===topic);
const handleLoadMore = () => {
  const newIndex = articleIndex + 5 > topicPosts.length ? topicPosts.length : articleIndex + 5;
  setArticleIndex(newIndex);
}
return (
  <section onClick={handleOutsideClick}>
    <div>
      <section>
        <h1>{topic}</h1>
        {
          topicsData.map((topicData)=> topicData.name.toLowerCase()===topic && <p key={topicData.id}>{topicData.intro}</p>)
        }
      </section>
      <div>
        <section>
          <div>
            {
              topicPosts.slice(0,3).map((post)=>{
                const { id } = post;
                return (
                  <TopicPagePost key={id} {...post}/>
                )
              })
            }
          </div>
          <div className={topicPosts.length>3 ? `subpage-articles` : `display-none`}>
            {
              topicPosts.slice(3,articleIndex).map((post, index)=>{
                const { id } = post;
                return (
                  <>
                    <TopicPagePost key={id} {...post}/>
                    {
                      index%4===0 && <div key={index} className="subpage-main-ad">
                        Ad placement here
                      </div>
                    }
                  </>
                )
              })
            }
          </div>
          <button type="button" onClick={handleLoadMore}>Load more articles</button>
        </section>
        <aside>
          <SubscribeBlock/>
          <div>
            Ad placement here
          </div>
        </aside>
      </div>
    </div>
  </section>
)

Answer 1

这是因为您需要将key 添加到从map 返回的第一个元素，在本例中为<>。

为此，您需要将<> 替换为<Fragment>，这样您就可以直接向其添加密钥：

import React, { Fragment } from "react"

{topicPosts.slice(3,articleIndex).map((post, index) => {
  const { id } = post;
    
  return (
    <Fragment key={id}>
      <TopicPagePost {...post}/>

      {index%4===0 && (
        <div className="subpage-main-ad">
          Ad placement here
        </div>
      )}
    </Fragment>
  )
})}