React请求OpenWeather API先返回undefined再返回数据的问题

云原生阿岚

2026-6-20

React天气应用API请求数据未加载完成导致子组件报错的解决方案

你的问题核心是：API请求是异步操作，React组件初始化时weatherData的初始值是undefined，子组件Weather直接访问weather_data.name时，因为数据还没返回就触发渲染，导致"无法读取undefined的name属性"的报错。

下面是具体解决方法：

1. 给状态设置初始默认值

初始化useState时，给weatherData设置一个空对象作为默认值，避免初始状态为undefined：

const [weatherData, setWeatherData] = useState({})

2. 子组件中处理数据未加载的情况

有两种常用方式：

方案一：使用可选链操作符（推荐）

通过?.操作符，只有当weather_data存在时才访问name属性，否则返回undefined，不会触发报错，还可以搭配||显示加载提示：

export default function Weather({weather_data}){
    return(
        <div>{weather_data?.name || '加载中...'}</div>
    )
}

方案二：条件渲染

判断数据是否加载完成，未完成时显示加载状态，完成后再渲染内容：

export default function Weather({weather_data}){
    if (!weather_data.name) {
        return <div>加载中...</div>
    }
    return(
        <div>{weather_data.name}</div>
    )
}

3. 优化异步请求代码（可选）

你原代码中async关键字没有实际用到，可以改成await写法，让异步逻辑更清晰：

const requestWeather = async (city)=> {
    try {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=4e4ff6f3165d9a027265ab73068e5a3a&mode=JSON`
        const response = await fetch(url)
        const data = await response.json()
        setWeatherData(data)
    } catch (error) {
        console.log('请求天气数据失败:', error);
    }
}