Получение данных из JSON GraphQL Ошибка: TypeError: Невозможно прочитать свойство 'map' из null - PullRequest
Новая
       27

Получение данных из JSON GraphQL Ошибка: TypeError: Невозможно прочитать свойство 'map' из null

0 голосов
/ 24 октября 2019

Я пытаюсь получить некоторые данные из запроса GraphQL, но у меня возникают некоторые проблемы.

Когда я пытаюсь отобразить некоторые данные JSon, я не могу получить данные из массивов внутриданные.

Я не уверен, что мне не хватает.

Что я пробовал:

  1. Это отлично работает: 
<div>
      {data.allDataJson.nodes.map(listing => (
          <div>
            <h2>{listing.name}</h2> 
          </div>
        ))}
    </div>

но когда я пытаюсь получить массив Camere, я не могу получить доступ к данным.

Когда я это делаю: выдает ошибку 
{data.allDataJson.nodes.map(listing => (
          <div>
            <h2>{listing.name}</h2>
            <h2>{listing.camere}</h2>
          </div>
))}

  • Объект недопустим как дочерний элемент React (найдено: объект с ключами {имя, сумма}),Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

  • также это: 
<div>
      {data.allDataJson.nodes.map(listing => (
          <div>
            <h2>{listing.name}</h2>

            {listing.camere.map(
              camere => 
              <div>
                <h1>{camere.name}</h1>
                <h1>{camere.amount}</h1>
              </div>
            )}
          </div>
        ))}
    </div>

Когда я пытаюсь сделать .map на нем, как в массиве, я получаю ошибку в заголовке сообщения.

Мой код: 


import React from 'react';
import { useStaticQuery, graphql } from "gatsby";

const Listing = () => {
  const data = useStaticQuery(graphql`
  query ListingQuery {
    allDataJson {
      nodes {
        camere {
          name
          amount
        }
        name
      }
    }
  }

`);

  return (
    <div>
      {data.allDataJson.nodes.map(listing => (
          <div>
            <h2>{listing.name}</h2>
            {listing.camere.map(home => <h1>{home.name}</h1>)}
          </div>
        ))}
    </div>
  );
};
export default Listing;

Мои данные: 

[ 
    { 
       "name":"Vila Franceza",
       "detaliipret":{ 
          "pret":"3000lei",
          "perioada":"iunie - iulie",
          "detaliu1":"Vila se inchiriaza exclusiv integral.",
          "detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
       },
       "detaliidescriere":[ 
          { 
             "text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
             "type":"normal"
          },
          { 
             "text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
             "type":"normal"
          },
          { 
             "text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
             "type":"normal"
          },
          { 
             "text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
             "type":"normal"
          },
          { 
             "text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
             "type":"normal"
          },
          { 
             "text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
             "type":"normal"
          },
          { 
             "text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
             "type":"normal"
          },
          { 
             "text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei.  Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
             "type":"normal"
          },
          { 
             "text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
             "type":"normal"
          },
          { 
             "text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
             "type":"normal"
          }
       ],
       "camere":[ 
          { 
             "name":"Livingroom deschis",
             "amount":1
          },
          { 
             "name":"Bucătărie americană",
             "amount":1
          },
          { 
             "name":"Sală pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Ieșire directă pe terasă",
             "amount":1
          },
          { 
             "name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Dormitor cu jacuzzi",
             "amount":1
          },
          { 
             "name":"Dormitor VIP cu jacuzzi și pat king size",
             "amount":1
          },
          { 
             "name":"dormitoare cu pat dublu",
             "amount":5
          },
          { 
             "name":"salon cu canapea extensibilă dublă",
             "amount":1
          },
          { 
             "name":"Spațiu de joacă pentru copii",
             "amount":1
          }
       ],
       "dotari":[ 
          "TV satelit",
          "Wi-Fi",
          "Sistem de sonorizare stereo profesional",
          "Masa de biliard",
          "Joc fotbal de masa Babyfoot",
          "Doua caiace pentru amatorii de vaslit",
          "Saniute pentru sezonul de iarna",
          "Semineu cu lemne in living, cu scaune incalzite",
          "Incalzire centrala (electrica, pe lemne, pe gaz )",
          "Masina de spalat rufe",
          "Masina de uscat rufe",
          "Fier si masa de calcat",
          "Uscatoare de par",
          "Gril exterior XXL",
          "Disc pentru grătar",
          "Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
          "Sauna",
          "Debarcader privat pentru sporturi nautice",
          "Mobilier de plaja",
          "Parcare privată",
          "Sistem de supraveghere video",
          "Plita pe gaz",
          "Microunde",
          "Prajitor paine",
          "Taietor electric",
          "Robot de bucatarie",
          "Vesela si accesorii pentru 20 de persoane",
          "Masina de spalat vase",
          "Frigider dublu",
          "Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
          "Expresor și filtru cafea"
       ]
    },
    { 
       "name":"Casa Pescarilor",
       "detaliipret":{ 
          "pret":"800lei",
          "perioada":"iunie - iulie",
          "detaliu1":"Vila se inchiriaza exclusiv integral.",
          "detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
       },
       "detaliidescriere":[ 
          { 
             "text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
             "type":"normal"
          },
          { 
             "text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
             "type":"normal"
          },
          { 
             "text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
             "type":"normal"
          },
          { 
             "text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
             "type":"normal"
          },
          { 
             "text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
             "type":"normal"
          },
          { 
             "text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
             "type":"normal"
          },
          { 
             "text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
             "type":"normal"
          },
          { 
             "text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei.  Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
             "type":"normal"
          },
          { 
             "text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
             "type":"normal"
          },
          { 
             "text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
             "type":"normal"
          }
       ],
       "camere":[ 
          { 
             "name":"Livingroom deschis",
             "amount":1
          },
          { 
             "name":"Bucătărie americană",
             "amount":1
          },
          { 
             "name":"Sală pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Ieșire directă pe terasă",
             "amount":1
          },
          { 
             "name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Dormitor cu jacuzzi",
             "amount":1
          },
          { 
             "name":"Dormitor VIP cu jacuzzi și pat king size",
             "amount":1
          },
          { 
             "name":"dormitoare cu pat dublu",
             "amount":5
          },
          { 
             "name":"salon cu canapea extensibilă dublă",
             "amount":1
          },
          { 
             "name":"Spațiu de joacă pentru copii",
             "amount":1
          }
       ],
       "dotari":[ 
          "TV satelit",
          "Wi-Fi",
          "Sistem de sonorizare stereo profesional",
          "Masa de biliard",
          "Joc fotbal de masa Babyfoot",
          "Doua caiace pentru amatorii de vaslit",
          "Saniute pentru sezonul de iarna",
          "Semineu cu lemne in living, cu scaune incalzite",
          "Incalzire centrala (electrica, pe lemne, pe gaz )",
          "Masina de spalat rufe",
          "Masina de uscat rufe",
          "Fier si masa de calcat",
          "Uscatoare de par",
          "Gril exterior XXL",
          "Disc pentru grătar",
          "Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
          "Sauna",
          "Debarcader privat pentru sporturi nautice",
          "Mobilier de plaja",
          "Parcare privată",
          "Sistem de supraveghere video",
          "Plita pe gaz",
          "Microunde",
          "Prajitor paine",
          "Taietor electric",
          "Robot de bucatarie",
          "Vesela si accesorii pentru 20 de persoane",
          "Masina de spalat vase",
          "Frigider dublu",
          "Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
          "Expresor și filtru cafea"
       ]
    },
    { 
       "name":"Modern Rooms Resort Colibita",
       "detaliipret":{ 
          "pret":"450lei",
          "perioada":"iunie - iulie",
          "detaliu1":"Vila se inchiriaza exclusiv integral.",
          "detaliu2":"Vila se poate inchiria de persoane juridice sau de persoane fizice."
       },
       "detaliidescriere":[ 
          { 
             "text":"Vila Franceza este situată pe malul nordic al lacului Colibița, într-o poziție care asigură o perspectivă unică asupra lacului dar și a munților Călimani.",
             "type":"normal"
          },
          { 
             "text":"La apă se ajunge prin intermediul debarcaderului situat la doar câțiva metri.",
             "type":"normal"
          },
          { 
             "text":"Accesul la vilă vă ferește de vizitatori nedoriți.",
             "type":"normal"
          },
          { 
             "text":"În apropierea vilei există mai multe restaurante și păstrăvării.",
             "type":"normal"
          },
          { 
             "text":"Pentru amatorii de drumeții există trasee turistice pentru vizitarea împrejurimilor și a Munților Călimani. Zona este foarte darnică în privința ciupercilor de pădure.",
             "type":"normal"
          },
          { 
             "text":"Există, de asemenea, rute pentru amatorii de mountain bike.",
             "type":"normal"
          },
          { 
             "text":"Pentru a vă asigura discreția, liniștea și confortul de care aveți nevoie, nu se inchiriază camere individuale.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza asigura un spatiu de cazare ideal pentru 15 persoane.",
             "type":"normal"
          },
          { 
             "text":"Vila Franceza va ofera liniste, confort si discretie pentru o vacanta sau o luna de miere perfecta.",
             "type":"normal"
          },
          { 
             "text":"Constructia este moderna iar peretii de sticla permit iluminarea naturala in cea mai parte a zilei.  Lacul si crestele muntoase pot fi admirate cu usurinta, dar cu discretie, din interior.",
             "type":"normal"
          },
          { 
             "text":"Inchirierea vilei se poate face pentru orice perioada din cursul unei saptamani pentru minim două zile. Din respect pentru confortul dumneavoastră, Vila Franceză se inchiriază exclusiv integral.",
             "type":"normal"
          },
          { 
             "text":"In interiorul vilei nu se fumeaza! Sunt admise animale de companie.",
             "type":"normal"
          }
       ],
       "camere":[ 
          { 
             "name":"Livingroom deschis",
             "amount":1
          },
          { 
             "name":"Bucătărie americană",
             "amount":1
          },
          { 
             "name":"Sală pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Ieșire directă pe terasă",
             "amount":1
          },
          { 
             "name":"Terasă deschisă pentru plajă, sport, cu loc acoperit pentru servirea mesei",
             "amount":1
          },
          { 
             "name":"Dormitor cu jacuzzi",
             "amount":1
          },
          { 
             "name":"Dormitor VIP cu jacuzzi și pat king size",
             "amount":1
          },
          { 
             "name":"dormitoare cu pat dublu",
             "amount":5
          },
          { 
             "name":"salon cu canapea extensibilă dublă",
             "amount":1
          },
          { 
             "name":"Spațiu de joacă pentru copii",
             "amount":1
          }
       ],
       "dotari":[ 
          "TV satelit",
          "Wi-Fi",
          "Sistem de sonorizare stereo profesional",
          "Masa de biliard",
          "Joc fotbal de masa Babyfoot",
          "Doua caiace pentru amatorii de vaslit",
          "Saniute pentru sezonul de iarna",
          "Semineu cu lemne in living, cu scaune incalzite",
          "Incalzire centrala (electrica, pe lemne, pe gaz )",
          "Masina de spalat rufe",
          "Masina de uscat rufe",
          "Fier si masa de calcat",
          "Uscatoare de par",
          "Gril exterior XXL",
          "Disc pentru grătar",
          "Spa exterior cu apa ionizata, incalzi,ta, capacitate 10 persoane",
          "Sauna",
          "Debarcader privat pentru sporturi nautice",
          "Mobilier de plaja",
          "Parcare privată",
          "Sistem de supraveghere video",
          "Plita pe gaz",
          "Microunde",
          "Prajitor paine",
          "Taietor electric",
          "Robot de bucatarie",
          "Vesela si accesorii pentru 20 de persoane",
          "Masina de spalat vase",
          "Frigider dublu",
          "Cuptor pizza pentru 15 persoane. Se poate folosi si la patiserie, friptura etc",
          "Expresor și filtru cafea"
       ]
    }
 ]

Что я хочу сделать:

Получить все данные из всех данных.

1 Ответ

1 голос
/ 24 октября 2019

Выполните условный рендеринг .

Для удобства чтения добавьте еще одну функцию для извлечения name с для каждого camere. 

const getNames = (camere) => (camere.map(home => <h1>{home.name}</h1>))

{data.allDataJson.nodes.map(listing => (
  <div>
    <h2>{listing.name}</h2>
    {
      listing.camere &&
      listing.camere.length > 0 &&
      this.getNames(listing.camere)
    }
  </div>
))}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...