当试图通过getStaticProps函数生成的支柱映射时，map无法读取未定义错误的属性

Question

你好，我仍然是新的下一个和一般的反应，所以请容忍我。我在getStaticProps next.js函数中编写了一些代码，从API中获取数据并返回数据。我知道它正在被正确地处理，因为我可以在getStaticProps函数中对它进行控制台日志记录，没有任何问题。但是当我进入我的ActiveCases函数并尝试从道具中提取它时，我就没有定义了。有人能帮我把getStaticProps的数据放到道具中，然后把它拉到我的页面上显示吗？

如果需要的话，我还会使用Axios来获取API。

另一个注意，如果我的代码中有什么不被认为是最佳实践/在公司和大规模的next/react应用程序中不一样的话，请让我知道我应该改变什么。

下面是完整代码

getStaticProps函数

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反应函数元件

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

Answer 1

代码中的问题是map返回一个promise数组而不是数据。

你可以这样做：

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