如何解决如何使用 React 动态映射深层 JSON 数据
我正在使用 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,"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","cc_license_url": null
}
},{
"greater_paris": {
"id": "greater-paris","destination": "Greater Paris","cc_license_url": "https://creativecommons.org/licenses/by/3.0/legalcode"
}
},{
"lyon": {
"id": "lyon","destination": "Lyon","cc_license_url": "https://creativecommons.org/licenses/by-sa/4.0/legalcode"
}
}
]
}
解决方法
您可以提取这些城市并在这些城市上运行地图，例如 arr["netherlands"].map(e => Object.values(e)).flat().map(place => {......
let arr = {
"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,"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","cc_license_url": null
}
},{
"greater_paris": {
"id": "greater-paris","destination": "Greater Paris","cc_license_url": "https://creativecommons.org/licenses/by/3.0/legalcode"
}
},{
"lyon": {
"id": "lyon","destination": "Lyon","cc_license_url": "https://creativecommons.org/licenses/by-sa/4.0/legalcode"
}
}
]
}
let result = arr["netherlands"].map(e => Object.values(e)).flat();
console.log(result);版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。