我正在使用 React 和 Next.js，但仍然不擅长引用更深层次的嵌套 JSON 数据（如果我想要做的事情是可能的）。
我从我的 JSON 文件中接收（目的地）作为获取的对象数组，稍后将动态分配国家名称（没问题）。
我需要做的是访问任何给定国家/地区数组中每个城市对象下方嵌套的键和值。我正在尝试映射这些属性以创建动态组件。每个包含具有键/值的对象的城市对象都需要动态引用以将这些值分配给我的组件。
我不知道如何引用城市，也许使用动态变量来访问它们持有的对象。请注意，如果可以帮助我实现目标，我可以更改 JSON 数据的格式/结构，因为我还没有插入大多数数据。
您会在中间代码部分（低级组件）中找到我的特殊问题，其中我有 destinations.map((place) => {}) 我无法访问城市的属性，这些属性被动态地埋得更深一层。
高级页面接收组件：
import React, { useState, useEffect } from 'react';
import DestinationsPage from '../components/DestinationsPage';
export default function Home({ destinationData }) {
const placeName = 'netherlands';
console.log('destinationData:', destinationData[placeName]);
const [ destinations, setDestinations ] = useState([]);
useEffect(() => {
setDestinations(destinationData[placeName]);
}, []);
return (
<DestinationsPage destinations={destinations} placeName={placeName} />
);
}
export const getStaticProps = async () => {
const response = await fetch('http://localhost:3000/data/destinations.json', {
headers: {
'Content-Type': 'application/json'
}
});
const destinationData = await response.json();
return {
props: {
destinationData
}
};
};
低级组件：
import DestinationCard from './DestinationCard';
import styles from '../styles/Destinations.module.css';
export default function DestinationsPage({ destinations, placeName }) {
return (
<main>
<h1 className={styles.destination_placeName}>
{placeName} Attraction Guides
</h1>
<h2 className="destinations-list-heading">
Destinations A ‑ Z
</h2>
<section className={styles.destination_list}>
<div className={styles.destinations_container}>
{destinations.map((place) => {
const { id } = place;
return (
<DestinationCard
key={id}
{...place}
pageType="destinationsPage"
/>
);
})}
</div>
</section>
</main>
);
}
JSON数据：
{
"netherlands": [
{
"amsterdam": {
"id": "amsterdam",
"destination": "Amsterdam",
"page_url": "/destinations/europe/netherlands/amsterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Amsterdam-Prinsensluis-Prinsenstraat-Bridge-South-View-Sunset.jpg",
"image_alt": "Lovely evening views looking down a Central Amsterdam canal lined with historic row houses and trees, with an oncoming tour boat, seen from the Preisensluis Bridge",
"cc_image_url": "https://pixabay.com/en/amsterdam-channel-netherlands-1089646/",
"cc_author_url": "https://pixabay.com/en/users/neshom-447256/",
"cc_author": "neshom",
"cc_license": null,
"cc_license_url": null
}
},
{
"greater_amsterdam": {
"id": "greater-amsterdam",
"destination": "Greater Amsterdam",
"page_url": "/destinations/europe/netherlands/greater-amsterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Greater-Amsterdam-Zaanse-Schans-Windmills.jpg",
"image_alt": "Lovely colored windmills seen along the water in the Dutch countryside of Zaanse Schans, Netherlands",
"cc_image_url": "https://commons.wikimedia.org/w/index.php?title=File:Zaanse_Schans_-_panoramio_-_cisko66.jpg&action=history",
"cc_author_url": "https://commons.wikimedia.org/wiki/User:Erik_Zachtehttps://commons.wikimedia.org/w/index.php?title=File:Zaanse_Schans_-_panoramio_-_cisko66.jpg&action=history",
"cc_author": "cisko66",
"cc_license": "CC BY 3.0",
"cc_license_url": "https://creativecommons.org/licenses/by/3.0/legalcode"
}
},
{
"rotterdam": {
"id": "rotterdam",
"destination": "Rotterdam",
"page_url": "/destinations/europe/netherlands/rotterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Rotterdam-Markthal-Market-Hall-Exterior-Day.jpg",
"image_alt": "Markthal marketplace exterior during the day in Rotterdam, Netherlands",
"cc_image_url": "https://commons.wikimedia.org/w/index.php?title=File:Markthal_-_Rotterdam.jpg&action=history",
"cc_author_url": "https://commons.wikimedia.org/wiki/User:Erik_Zachte",
"cc_author": "Erik Zachte",
"cc_license": "CC BY-SA 4.0",
"cc_license_url": "https://creativecommons.org/licenses/by-sa/4.0/legalcode"
}
}
],
"france": [
{
"paris": {
"id": "paris",
"destination": "Paris",
"page_url": "/destinations/europe/netherlands/amsterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Amsterdam-Prinsensluis-Prinsenstraat-Bridge-South-View-Sunset.jpg",
"image_alt": "Lovely evening views looking down a Central Amsterdam canal lined with historic row houses and trees, with an oncoming tour boat, seen from the Preisensluis Bridge",
"cc_image_url": "https://pixabay.com/en/amsterdam-channel-netherlands-1089646/",
"cc_author_url": "https://pixabay.com/en/users/neshom-447256/",
"cc_author": "neshom",
"cc_license": null,
"cc_license_url": null
}
},
{
"greater_paris": {
"id": "greater-paris",
"destination": "Greater Paris",
"page_url": "/destinations/europe/netherlands/greater-amsterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Greater-Amsterdam-Zaanse-Schans-Windmills.jpg",
"image_alt": "Lovely colored windmills seen along the water in the Dutch countryside of Zaanse Schans, Netherlands",
"cc_image_url": "https://commons.wikimedia.org/w/index.php?title=File:Zaanse_Schans_-_panoramio_-_cisko66.jpg&action=history",
"cc_author_url": "https://commons.wikimedia.org/wiki/User:Erik_Zachtehttps://commons.wikimedia.org/w/index.php?title=File:Zaanse_Schans_-_panoramio_-_cisko66.jpg&action=history",
"cc_author": "cisko66",
"cc_license": "CC BY 3.0",
"cc_license_url": "https://creativecommons.org/licenses/by/3.0/legalcode"
}
},
{
"lyon": {
"id": "lyon",
"destination": "Lyon",
"page_url": "/destinations/europe/netherlands/rotterdam-attractions-guide",
"image_url": "https://www.travelimager.com/images/netherlands/Netherlands-Rotterdam-Markthal-Market-Hall-Exterior-Day.jpg",
"image_alt": "Markthal marketplace exterior during the day in Rotterdam, Netherlands",
"cc_image_url": "https://commons.wikimedia.org/w/index.php?title=File:Markthal_-_Rotterdam.jpg&action=history",
"cc_author_url": "https://commons.wikimedia.org/wiki/User:Erik_Zachte",
"cc_author": "Erik Zachte",
"cc_license": "CC BY-SA 4.0",
"cc_license_url": "https://creativecommons.org/licenses/by-sa/4.0/legalcode"
}
}
]
}