如何使用 React 动态映射深层 JSON 数据

Question

I'm using React and Next.js, still not proficient at referencing deeper nested JSON data (if what I'm trying to do is possible).

I'm receiving (destinations) as a fetched array of objects from my JSON file which will later have the country name dynamically assigned (no problem).

What I need to do is access the keys and values nested below each city object in the array for any given country. I'm trying to map these properties to create dynamic components. Each city object containing an object with the keys/values needs to be referenced dynamically to assign these values to my component.

I can't figure out how to reference the cities perhaps using a dynamic variable to access the objects they hold. Note that I can change the format/structure of my JSON data if it would help me accomplish my goal, as I haven't plugged in most data yet.

You'll find my particular issue in the middle Code section (Lower Level Component) where I have destinations.map((place) => {}) where I'm unable to access the city's, properties buried one level deeper, dynamically.

Higher Level Page receiving component:

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
    }
};
};

Lower Level Component:

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&nbsp;Guides
        </h1>

        <h2 className="destinations-list-heading">
            Destinations A&nbsp;&#8209;&nbsp;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 Data:

{
"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"
        }
    }
]

}

Answer 1

You can extract those cities and run map on those, like 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, 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" } } ] } let result = arr["netherlands"].map(e => Object.values(e)).flat(); console.log(result);