API 响应在使用时未定义，但在 console.log() 时未定义

Question

我正在尝试显示来自 https://api.coincap.io/v2/assets 的数据。我在控制台中获取数据，但是当我尝试在 return() 中显示它时，数据变得未定义。

TypeError: Cannot read property '0' of undefined


    useEffect(() => {
        axios.get('https://api.coincap.io/v2/assets')
            .then(function (response) {
                setApiData(response.data.data)
                //console.log(response.data.data);
            })
            .catch(function (error) {
                console.log(error);
            })
    }, [])

console.log(apiData)
    return (
        <>
            {/*{apiData[0].id}*/}
        </>
    )
};

我认为我需要在页面呈现后再次运行 useEffect？

Answer 1

首先你应该检查你的数组是否有数据。顺便说一下我没有检查代码，它会是这样的。

return (
    <>
      {apiData && apiData.length !== 0 ? apiData[0].id : "Please wait while fetching..."}
    </>

API 响应在使用时未定义，但在 console.log() 时未定义

API response is undefined when used, but not when console.log()

api

undefined

reactjs

axios

use-effect