我正在尝试从GraphQL查询中获取一些数据,但是遇到了一些麻烦。
当我尝试映射一些JSon数据时,我无法从数据内部的数组中获取数据。
我不确定我缺少什么。
我尝试过的事情:
<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子对象无效(找到:带有键{name,amount}的对象)。如果要渲染子级集合,请改用数组。
<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"
]
}
]
我想做的事:
从所有数据中获取所有详细信息。
答案 0 :(得分:1)
出于可读性考虑,添加另一个函数为每个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>
))}