尝试通过 getStaticProps 函数生成的 prop 进行映射时，获取无法读取未定义错误的属性

Question

你好，我还是 next 的新手，反应一般，所以请多多包涵。我在 getStaticProps next.js 函数中编写了一些代码来从 API 和 return 函数中获取数据。我知道它正在被正确处理，因为我可以在 getStaticProps func 中毫无问题地将它记录下来。但是当我进入 ActiveCases 函数并尝试从道具中提取它时，我得到 undefined。任何人都可以帮助从 getStaticProps 获取数据到 props，然后将其拉到我的页面上显示吗？

如果重要的话，我也在使用 Axios 来获取 API。

另外请注意，如果我的代码中有任何不被认为是最佳的 practice/is 在公司和大型 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 React 函数组件

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

尝试通过 getStaticProps 函数生成的 prop 进行映射时，获取无法读取未定义错误的属性

Getting cannot read properties of undefined error when trying to map through prop generated by getStaticProps function

javascript

api

reactjs

next.js

react-props