如何在reactjs中使用map从api中获取数据？答案

【问题标题】：How to fetch data from api using map in reactjs?如何在reactjs中使用map从api中获取数据？
【发布时间】：2021-05-07 10:16:02
【问题描述】：

我有一个问题，如何使用 map 从 API 获取多数组数据错误-TypeError：无法读取未定义的属性“地图” TypeError: map is not a function (fetch region data using map)

const [coviddata, setCoviddata] = useState();
useEffect(() => {
    fetch("https://api.rootnet.in/covid19-in/stats/latest")
    .then((res) => res.json())
    .then((codata) => setCoviddata(codata.data))
})

return (
    <>
    <h1>States</h1>
    {
        coviddata.map(
            (covax) => (
                <h3>{covax.regional.loc}</h3>
            )
        )
    }
    </>
)

}

API：https://api.rootnet.in/covid19-in/stats/latest

【问题讨论】：

.then((codata) => setCoviddata(codata.data.regional)) 和 const [coviddata, setCoviddata] = useState([]); 更改您的代码。它会运行。 Map 将使用数组 josn 对象而不是简单对象

标签： reactjs api

【解决方案1】：

您尝试从结果中访问的“数据”属性不是数组。而是这样做。

const [coviddata, setCoviddata] = useState([]);

    useEffect(() => {


        fetch("https://api.rootnet.in/covid19-in/stats/latest")
            .then((res) => res.json())
            .then((codata) => setCoviddata(codata.data.regional))
    });

    return (
        <>
            <h1>States</h1>
            {
                coviddata.map(
                    (covax, index) => (
                        <h3 key={index}>{covax.loc}</h3>
                    )
                )
            }
        </>
    )

【讨论】：

【解决方案2】：

因为coviddata 的首字母是undefined。所以coviddata.map 会显示这个错误。 coviddata api调用成功时才变为数组。

您只需使用空数组更新贴花状态：

const [coviddata, setCoviddata] = useState([]);

或者你可以使用optional chaining来检查数据不是undefined：

coviddata?.map(...)

【讨论】：

你缺少空数组
@SomeoneSpecial 非常感谢您！我更新了我的答案