React天气App API数据获取报错：无法读取temp属性

问题原因 #

你遇到的Cannot read properties of undefined (reading 'temp')错误，本质是传递给WeatherDisp组件的data对象中，main属性为undefined。虽然你在App.js里用了weather && <WeatherDisp data={weather}/>，但JS中空对象{}属于真值，即便weather是没有main属性的空对象，组件依然会被渲染，此时访问data.main.temp就会报错。另外也可能是API返回的数据结构和你预期不符，比如main字段不存在或嵌套层级错误。

解决方案 #

1. 子组件中使用可选链操作符 #

直接在访问嵌套属性时添加可选链?.，这样任意一层属性不存在时都会返回undefined，不会触发报错：

const WeatherDisp = ({data}) => {
    return (
        <div>
            <p>{data?.main?.temp}</p>
        </div>
    );
}

如果需要显示默认值，可以配合空值合并操作符??：

<p>{data?.main?.temp ?? '暂无数据'}</p>

2. 严格控制组件渲染时机 #

在App.js里，不要只判断weather是否存在，而是判断weather.main是否存在，确保传递给子组件的是完整的、包含所需属性的对象：

{weather?.main && <WeatherDisp data={weather}/>}

3. 检查API返回数据结构 #

在App.js中打印API返回的weather数据，确认实际结构是否符合预期：

console.log('API返回数据:', weather);

比如有些天气API返回的是数组（如[ { main: { temp: ... } } ]），这时你需要取数组第一项再传递：

{weather?.length > 0 && <WeatherDisp data={weather[0]}/>}

4. 子组件内添加条件渲染 #

在子组件里先判断data.main是否存在，再渲染温度信息，同时可以显示加载提示：

const WeatherDisp = ({data}) => {
    if (!data?.main) {
        return <div>加载中...</div>;
    }
    return (
        <div>
            <p>{data.main.temp}</p>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Khushaal Sharma