Hello I'm still new to next and react in general so please bear with me. I've written some code inside the getStaticProps next.js function to fetch data from an API, and return it. I know it's being properly processed because I can console log it inside the getStaticProps func with no issues. But when I go into my ActiveCases function and try and extract it from props I get undefined. Can anyone help with getting the data from getStaticProps, into props and then pull it to display on my page?

I'm also using Axios to fetch the API if that matters.

Another note if there is anything in my code which would not be considered best practice/is done diffrently at companies and large scale next/react apps please let me know what I should change.

Full code below

getStaticProps function

export const getStaticProps = async () => {
    const options = {
        method: 'GET',
        url: 'https://covid-19-statistics.p.rapidapi.com/regions',
        headers: {
          'x-rapidapi-host': 'covid-19-statistics.p.rapidapi.com',
          'x-rapidapi-key': 'API_KEY_REMOVED'
        }
    };
    const result = await axios.request(options);
    const dataFromResult = result.data.data;
    let data = [];

    dataFromResult.map(async (item, index) => {
        const options = {
            method: 'GET',
            url: 'https://covid-19-statistics.p.rapidapi.com/reports',
            params: {
              iso: item.iso,
              region_name: item.name,
              date: '2022-01-14'
            },
            headers: {
              'x-rapidapi-host': 'covid-19-statistics.p.rapidapi.com',
              'x-rapidapi-key': 'API_KEY_REMOVED'
            }
          };

        const result = await axios.request(options);
        const dataV = result.data.data[0];
        let region;

        if (dataV?.region === undefined) {
            region = item.name;
        } else {
            region = dataV.region;
        }

        if (dataV === undefined) return;

        const dataStructure = {
            "country_name": item.name,
            "cases": dataV.confirmed,
            "deaths": dataV.deaths,
            "recovered": dataV.recovered,
            "active": dataV.active,
            "fatality_rate": dataV.fatality_rate,
            "date": dataV.date,
            "last_update": dataV.last_update,
            "region": region
        }
        
        data = [
            ...data,
            { dataStructure }
        ]
    })

    return {
        props: { 
            data,
        }
    }
}

ActiveCases react function component

export default function ActiveCases({ data }) {
    return (
        <div>
            <h1>Active Cases</h1>
            { data.map((item, index) => {
                return (
                    <div key={index}>
                        <p>Country: {item.dataStructure.country_name} </p>
                        <p>Cases: {item.dataStructure.cases}</p>
                    </div>
                )
            }) }
        </div>
    )
}

CodePudding user response：

The problem in your code is map is returning an array of promise instead of data.

You can do sth like this:

await Promise.all(dataFromResult.map(async (item, index) => {
    const options = {
            method: 'GET',
            url: 'https://covid-19-statistics.p.rapidapi.com/reports',
            params: {
              iso: item.iso,
              region_name: item.name,
              date: '2022-01-14'
            },
            headers: {
              'x-rapidapi-host': 'covid-19-statistics.p.rapidapi.com',
              'x-rapidapi-key': 'API_KEY_REMOVED'
            }
          };

        const result = await axios.request(options);
        const dataV = result.data.data[0];
        let region;

        if (dataV?.region === undefined) {
            region = item.name;
        } else {
            region = dataV.region;
        }

        if (dataV === undefined) return;

        const dataStructure = {
            "country_name": item.name,
            "cases": dataV.confirmed,
            "deaths": dataV.deaths,
            "recovered": dataV.recovered,
            "active": dataV.active,
            "fatality_rate": dataV.fatality_rate,
            "date": dataV.date,
            "last_update": dataV.last_update,
            "region": region
        }
        
        data = [
            ...data,
            { dataStructure }
        ]
    })

    return {
        props: { 
            data,
        }
    }
}));