React中如何从Promise提取数据用于页面渲染？

核心问题原因 #

async 函数默认返回一个 Promise，你直接赋值 const weatherData = getAPI() 得到的是处于pending状态的Promise对象，而非实际的天气数据，因此无法直接访问 weatherData.temp。

解决方案：使用React状态与副作用钩子 #

在React组件中，需要通过状态管理异步数据，并利用useEffect处理API请求这类副作用操作，具体实现如下：

1. 优化API请求函数

先简化你的getAPI函数，去掉冗余的.then（已经使用await就不需要嵌套then）：

async function getAPI(apiLink) {
  const response = await axios.get(apiLink);
  return {
    temp: response.data.main.temp - 273.15,
    weatherIcon: response.data.weather[0].icon,
    windSpeed: response.data.wind.speed
  };
}

2. 在组件中管理状态与请求

import { useState, useEffect } from 'react';
import axios from 'axios';

function WeatherComponent() {
  // 存储天气数据的状态，初始值为null
  const [weatherData, setWeatherData] = useState(null);
  // 加载状态，用于显示加载提示
  const [isLoading, setIsLoading] = useState(true);
  // 错误状态，处理请求失败情况
  const [error, setError] = useState(null);

  useEffect(() => {
    // 封装异步请求逻辑
    const fetchWeather = async () => {
      try {
        // 替换为你的实际API链接
        const apiLink = 'https://api.openweathermap.org/data/2.5/weather?q=YourCity&appid=YourAPIKey';
        const data = await getAPI(apiLink);
        // 获取数据后更新状态，触发组件重新渲染
        setWeatherData(data);
      } catch (err) {
        setError('Failed to fetch weather data');
      } finally {
        setIsLoading(false);
      }
    };

    fetchWeather();
  }, []); // 空依赖数组确保请求只在组件挂载时执行一次

  // 渲染逻辑：处理加载中、错误、数据就绪三种状态
  if (isLoading) return <p>Loading weather data...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <p>temperature is {weatherData.temp.toFixed(2)} Celcius</p>
      <p>Wind speed: {weatherData.windSpeed} m/s</p>
      {/* 渲染OpenWeather的天气图标 */}
      <img 
        src={`http://openweathermap.org/img/wn/${weatherData.weatherIcon}@2x.png`} 
        alt="Weather condition icon"
      />
    </div>
  );
}

export default WeatherComponent;

关键说明 #

• 状态管理：通过useState存储异步数据，状态更新会触发组件重新渲染，从而展示最新数据。
• 副作用处理：useEffect用于在组件挂载时发起API请求，避免在组件渲染阶段执行异步操作。
• 边界情况处理：添加加载状态和错误状态，提升用户体验，同时避免数据未就绪时访问属性导致的报错。

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