React组件中如何从Promise获取值并赋值给变量？

首先明确：Axios请求是异步操作，不可能让函数直接同步返回最终结果——异步任务完成前，函数早就执行完毕了，所以你拿到的必然是Promise。想要在组件中正确使用异步数据，得结合React的状态管理和生命周期钩子。

改造方案 #

1. 将getData改为async函数，用await简化异步流程
2. 在组件中用useState存储数据状态，useEffect触发异步请求
3. 处理加载/错误状态，提升组件健壮性

改造后的getData函数

async function getData(packsId) {
  if (!packsId) {
    return "Doesn't exist";
  }
  try {
    // 用模板字符串拼接URL更简洁
    const response = await axios.get(`http://localhost:8000/api/words?id=${packsId}`);
    return response.data.title;
  } catch (error) {
    return error.code;
  }
}

组件中正确使用异步数据

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

async function getData(packsId) {
  if (!packsId) {
    return "Doesn't exist";
  }
  try {
    const response = await axios.get(`http://localhost:8000/api/words?id=${packsId}`);
    return response.data.title;
  } catch (error) {
    return error.code;
  }
}

export default function WordsPack() {
  // 用state存储异步返回的结果
  const [result, setResult] = useState(null);
  // 加载状态，避免初始null显示问题
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // useEffect不能直接用async，所以内部封装异步函数
    const fetchData = async () => {
      const packsId = '11111';
      // await获取getData的异步结果
      const data = await getData(packsId);
      // 更新state触发组件重新渲染
      setResult(data);
      setLoading(false);
    };

    fetchData();
    // 空依赖数组表示只在组件挂载时执行一次
  }, []);

  // 加载中显示占位内容
  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>{result}</div>;
}

关键说明 #

• 异步函数（带async关键字）的返回值永远是Promise，必须用await或者.then()才能拿到最终结果
• React组件的渲染是同步的，异步数据必须通过useState存储，更新state时组件会自动重新渲染，展示最新数据
• 加入加载状态是必要的，避免组件初始渲染时显示null或者空白

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