如何使用 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

Because initial of coviddata is undefined . So coviddata.map will show this error. coviddata only change to array when api call success.

You just update decalre state with empty array:

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

Or you can use optional chaining to check data is not undefined :

coviddata?.map(...)

Answer 2

The 'data' property you're trying to access from the results is not an array. Rather do this.

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