盖茨比：独特的“关键”道具答案

【问题标题】：Gatsby: unique "key" prop盖茨比：独特的“关键”道具
【发布时间】：2020-09-28 16:52:10
【问题描述】：

我正在尝试通过 Graphql 从内容中获取一类数据并发布到网页上，但现在无法正常工作..

成功

获取 id、图片、slug 标题

失败

网页上唯一的标题放不出来。

错误

index.js:2177 警告：列表中的每个孩子都应该有一个唯一的 “关键”道具。块引用检查StaticQueryDataRenderer的渲染方法。

index.js

import React from 'react'
import { graphql, navigate, StaticQuery } from 'gatsby'
import './home.css'

export default () => (
   <StaticQuery
     query={graphql` 
  query HomeQuery {
    allContentfulBlog(
   
        sort: { fields: [createdAt], order: DESC }     
      ) {
      edges {
        node {
          id
          slug
          title
          category {
            id
           
          }
        }
      }
    }
  }
`}
     render={data => (
        <div className='feed'>
        {data.allContentfulBlog.edges.map(edge => (
            <div key={edge.node.id} className='card'
        onClick={() => navigate(`/blog/${edge.node.slug}`)} >
        {edge.node.category.map(categories=> (
            <p className='card__category'>{categories.category}</p>
        ))}
        </div>
        ))}
      </div>
     )}
   />
 )

【问题讨论】：

标签： reactjs gatsby contentful

【解决方案1】：

如错误所示，它是warning，而不是error。它不会破坏您的代码。

key 是一个应该为所有循环项目提供的道具。它是一个特殊的字符串属性，您在创建元素列表时需要包含它，以帮助 React 识别哪些项目已更改、添加或删除。它应该是一个唯一值，分配循环的index 不是一个好习惯（因为它不是唯一的）。您可以连接索引和另一个变量（例如名称或标题）。

你只需要：

   {edge.node.category.map( ss => (
        return <p key={ss.title} className='card__category' >{ss.title}</p>
     ))}

找出key 和return。所有映射的元素都必须返回一些东西。

我建议阅读以下内容：

【讨论】：