錯誤：在迭代器 react/jsx-key 中缺少元素的“key”道具

Question

錯誤：在迭代器 react/jsx-key 信息中缺少元素的“key”道具 - 需要禁用一些 ESLint 規則？

return (
<div>
  <div>
    <BreadcrumbBlogs />
  </div>
  <div className={styles.container}>
    <div className={styles.blogblock}>
      {newsposts.slice(0, 6).map((post) => (
        <div className={styles.blogcontent} key={post.id}>
          <Image
            src={post.jetpack_featured_media_url}
            width={600}
            height={400}
            alt="thumbnail"
          ></Image>
          <Link href={`${post.id}`} className={styles.blogcolumn}>
            <div
              className={styles.blogtitile}
              dangerouslySetInnerHTML={{ __html: post.title.rendered }}
            ></div>
          </Link>
        </div>
      ))}
    </div>
  </div>
</div>

);

截屏

Answer 1

要解決此問題，請將key={post.id}添加到您的div元素而不是Link元素。 在這種情況下，ESLint 規則提供了有價值的反饋，所以我不會禁用它。

Answer 2

在 React 中，當您想要創建多個組件時，您必須為每個子組件提供一個“鍵”，並且該鍵必須是唯一的值。

所以，為了解決這個問題，將 key prop 添加到 div

<div className={styles.blogcontent} key={post.id}>

如果您沒有 id，您可以使用任何唯一的東西（例如數組索引）。