如何使用 reactjs 中的 map 从 api 获取数据？

Question

I have a problem how can I fetch multi-array data from API using map error - TypeError: Cannot read property 'map' of undefined TypeError: map is not a function ( fetch regional 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

Answer 1

因为coviddata的初始值是undefined 。 所以coviddata.map会显示这个错误。 仅当 api 调用成功时， coviddata才会更改为数组。

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

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

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

coviddata?.map(...)

Answer 2

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

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