Я получаю следующую ошибку на компоненте реакции. Я думал, что установил уникальный ключ, когда смотрю в графическом обозревателе игровых площадок, идентификатор, который я беру, уникален для каждого элемента. Поэтому я не уверен, почему я получаю эту ошибку. Я прочитал, что элементам внутри моего также нужен ключ, который, как я думал, был не тот. Надеюсь, кто-то может помочь.

ошибка

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

GraphQL Query

 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": "SMART 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": "SMART 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": "SMART 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 }) ={amp}gt; ( {amp}lt;div key={pricing.id} {amp}gt; {amp}lt;ul className="details-list"{amp}gt;{pricing.details.map(detailEntry ={amp}gt; { return {amp}lt;ListItem key={detailEntry.id}{amp}gt;{amp}lt;span{amp}gt;{detailEntry.task}{amp}lt;/span{amp}gt; {amp}lt;/ListItem{amp}gt; })}{amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; ... 

Похоже, pricing.id не undefined . Он представлен node.id в ваших данных, но у вас есть только свойство details . Ваш запрос в графике отражает это. Добавление id в запрос должно устранить ошибку:

 query MyQuery { allDatoCmsPricing { edges { node { id # {amp}lt;--- Added this field details { id task } } } } }