在 Gatsby JS (react) 中收到关于拥有唯一密钥道具的警告

Question

我在反应组件上收到以下错误。当我查看 graphQL 游乐场资源管理器时，我以为我设置了一个唯一键，我正在抓取的 id 对于每个元素都是唯一的。所以我不确定为什么我会收到这个错误。我读到我里面的元素也需要一个我认为不是这样的钥匙。希望有人可以提供帮助。

错误

Warning: Each child in a list should have a unique "key" prop.

GraphQL 查询

query MyQuery {
  allDatoCmsPricing {
    edges {
      node {
        id //This was orignally there when I posted
        details {
          id //This was missing that was my error which was answered
          task
        }
      }
    }
  }
}

GraphQL 结果

{
  "data": {
    "allDatoCmsPricing": {
      "edges": [
        {
          "node": {
            "details": [
              {
                "id": "DatoCmsItem-1919839-en",
                "task": "Client Consultation"
              },
              {
                "id": "DatoCmsItem-1919840-en",
                "task": "S.M.A.R.T Goal Setting"
              },
              {
                "id": "DatoCmsItem-1919841-en",
                "task": "Fitness Assessment"
              },
              {
                "id": "DatoCmsItem-1919842-en",
                "task": "Client Centered Exercises"
              },
              {
                "id": "DatoCmsItem-1919843-en",
                "task": "1-2 Sessions per week"
              }
            ]
          }
        },
        {
          "node": {
            "details": [
              {
                "id": "DatoCmsItem-1927942-en",
                "task": "Client Consultation"
              },
              {
                "id": "DatoCmsItem-1927943-en",
                "task": "S.M.A.R.T Goal Setting testing breaking line"
              },
              {
                "id": "DatoCmsItem-1927945-en",
                "task": "Fitness Assessment"
              },
              {
                "id": "DatoCmsItem-1927946-en",
                "task": "Client Centered Exercises"
              },
              {
                "id": "DatoCmsItem-1927947-en",
                "task": "Injury Prevention"
              },
              {
                "id": "DatoCmsItem-1927948-en",
                "task": "Nutrition Advice"
              },
              {
                "id": "DatoCmsItem-1927949-en",
                "task": "Program Design"
              },
              {
                "id": "DatoCmsItem-1927950-en",
                "task": "Corrective Exercises"
              },
              {
                "id": "DatoCmsItem-1927951-en",
                "task": "3 or more Sessions per week"
              }
            ]
          }
        },
        {
          "node": {
            "details": [
              {
                "id": "DatoCmsItem-1927866-en",
                "task": "Client Consultation"
              },
              {
                "id": "DatoCmsItem-1927867-en",
                "task": "S.M.A.R.T Goal Setting"
              },
              {
                "id": "DatoCmsItem-1927868-en",
                "task": "Fitness Assessment"
              },
              {
                "id": "DatoCmsItem-1927869-en",
                "task": "Client Centered Exercises"
              },
              {
                "id": "DatoCmsItem-1927870-en",
                "task": "Injury Prevention"
              },
              {
                "id": "DatoCmsItem-1927872-en",
                "task": "Nutrition Advice"
              },
              {
                "id": "DatoCmsItem-1927873-en",
                "task": "2-3 Sessions per week"
              }
            ]
          }
        }
      ]
    }
  }
}

组件

    {data.allDatoCmsPricing.edges.map(({ node: pricing }) => ( 

    <div key={pricing.id} >

    <ul className="details-list">{pricing.details.map(detailEntry => { 
       return <ListItem key={detailEntry.id}><span>{detailEntry.task}</span> 
       </ListItem>      
    })}</ul>

    </div>

    ...

Answer 1

看起来pricing.id 是undefined。它在您的数据中由 node.id 表示，但您只有一个 details 属性存在。您的 graphql 查询反映了这一点。在查询中添加id 应该可以解决错误：

query MyQuery {
  allDatoCmsPricing {
    edges {
      node {
        id # <--- Added this field
        details {
          id
          task
        }
      }
    }
  }
}