使用 OpenWeatherMapAPI 在 React JS 中构建天气应用。我想做的是根据 API 的响应呈现动态背景。

我正在寻找的数据的端点是“data.weather[0].main”，它将显示文本“晴朗”、“多云”、“下雨”等...然后我将值作为 prop 传递给我的样式组件以呈现相应的图像。这是我收到错误的地方：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>
    )
}