Javascript 在盖茨比JS（react）中获得关于拥有唯一钥匙道具的警告

我在react组件上得到以下错误。当我在graphQL游乐场资源管理器中查看时，我想我已经设置了一个唯一的键，我获取的id对于每个元素都是唯一的。所以我不确定为什么会出现这个错误。我读到我手机里的元素也需要一把钥匙，我认为不是这样的。希望有人能帮忙

错误

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
        }
      }
    }
  }
}

图形结果

{
  "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>

    ...

{data.alldatocmpricing.edges.map（{node:pricing}）=>（
{pricing.details.map（detailEntry=>{
返回{detailEntry.task}
})}
...

它看起来像

定价.id

是

未定义的

。它由数据中的

节点.id

表示，但您只有一个

详细信息

属性。您的graphql查询反映了这一点。向查询中添加

id

可以解决错误：

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

querymyquery{
AllDatocms定价{
边缘{
节点{
id#看起来问题可能是您有两个
map
函数正在运行。您正在为第二个
map
分配一个键，但第一个没有为映射的
ul
分配一个键。但不确定它们是否嵌套。我添加了一些代码以进一步解释发生了什么，我删除了很多代码beca使用它相当大，但ul有一个带有键id的包装div，警告特别来自ListItem键所在的行。实际上，我有相反的警告。我在“详细信息”下缺少id，在“节点”下有id，这是必需的。我将更新我的问题，但你为我解决了它。
query MyQuery {
  allDatoCmsPricing {
    edges {
      node {
        id # <--- Added this field
        details {
          id
          task
        }
      }
    }
  }
}