我正在嘗試從此 API 訪問資訊。我可以訪問第一級，但是當我嘗試訪問超過第一級的任何屬性時，我收到一條錯誤訊息TypeError: Cannot read properties of undefined (reading 'usd')。
我正在使用功能組件和 useEffect() 掛鉤在 React 中呼叫我的 API。
JSON API 示例：
{
"name" : "Bitcoin",
"market_cap" : {
"usd" : 100
}
}
據我了解，這是因為 API 尚未完全獲取，因此第一級回傳為未定義。我能夠訪問第一級 ( coin.name)，但是當我嘗試 ( coin.market_cap.usd) 時出現錯誤。
有什么建議？
const Coin = () => {
const params = useParams()
const [coin, setCoin] = useState({})
const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}`
useEffect(() => {
axios.get(url).then((res) => {
setCoin(res.data)
}).catch((err) => {
console.log(err)
})
}, [])
return (
<div>
<h1>{coin.name}</h1>
<p>{coin.market_cap.usd}</p> ------>> Error here
</div>
</div>
)
}
export default Coin
uj5u.com熱心網友回復：
您的默認值coin是空物件，并且由于async在組件第一次嘗試渲染時獲取資料是操作，因此它不知道market_cap值，因此您需要在渲染時添加對該道具的檢查。
這將解決您的問題：
return (
<div>
{coin.name ? <h1>coin.name</h1> : null}
{
coin.market_data?.market_cap
? <p>{coin.market_data.market_cap.usd}</p>
: null
}
</div>
)
uj5u.com熱心網友回復：
您在從您的 api 獲得資料之前使用硬幣屬性，因為初始值是一個空物件 {}
您應該驗證資料是否存在，否則會引發錯誤：
useEffect(() => {
const getData = async() ={ ?
?await axios.get(url).then((res) => {
?setCoin(res.data)
?}).catch((err) => {
?console.log(err)
? })
}
getData()
}, [])
...
回傳 （
<div>
<h1>**{coin.name ? coin.name : ''}**</h1>
<p>**{coin.market_cap ? coin.market_cap.usd : ''}**</p> ------>> Error here
</div>
</div>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/405284.html
標籤：