Question

我在react组件上收到以下错误。当我在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
        }
      }
    }
  }
}

在Gatsby JS（反应）中获得有关拥有独特钥匙道具的警告

1 个答案: