使用 OpenWeatherMapAPI 在 React JS 中構建天氣應用程式。我想做的是根據 API 的回應呈現動態背景。
我要查找的資料的終點是“data.weather[0].main”，它將顯示文本“晴天”、“陰天”、“雨天”等...然后我將傳遞該值通過作為我的樣式組件的道具來渲染相應的影像。這是我得到錯誤的地方：TypeError：無法讀取未定義的屬性（讀取'0'）。
我知道這是因為它是 JSON 檔案中的嵌套子級。所有第一級都有效，例如“data.main”或“data.timezone”。
我嘗試了以下方法，但仍然出現相同的錯誤：
console.log(data?.weather[0] ? data.weather[0].main : '')
const Weather = ({data}) => {
// Error here
console.log(data?.weather[0] ? data.weather[0].main : '')
return (
// Error here
<StyledContainer bg={data.weather[0].main}>
<Title>Style me</Title>
<Heading>{data.name}</Heading>
</StyledContainer>
)
}
uj5u.com熱心網友回復：
可選鏈接也可以用于陣列...
console.log(data?.weather?.[0].main ?? "")
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416317.html
標籤：
上一篇：將組件動態附加到地圖函式中