如何获取API实际数据而非Promise？React中API数据无法用于JSX求助

你遇到的核心问题是：async函数本身就会返回Promise对象，哪怕你用.then()链式调用，最终赋值给userRole的依然是一个Promise，而非实际的返回数据。要把API获取的数据渲染到JSX里，得用React的状态管理结合副作用钩子来处理，具体步骤如下：

解决方案步骤 #

• 用useState定义状态变量，用来存储从API拿到的用户角色数据
• 用useEffect触发API请求，在请求完成后更新状态
• 在JSX中根据状态值进行渲染（同时处理数据未加载完成的情况）

修改后的代码示例 #

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

// 保留你的fetchUser函数
const fetchUser = async () => {
  const baseUrl = "/api/user";
  const response = await axios.get(baseUrl);
  const { data } = response;
  return data.map(item => item.role);
};

function YourComponent() {
  // 初始化状态存储用户角色，默认值设为空数组
  const [userRole, setUserRole] = useState([]);
  // 可选：添加加载状态优化体验
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 在useEffect内部定义异步函数执行请求
    const getUserRole = async () => {
      try {
        const roleData = await fetchUser();
        setUserRole(roleData);
      } catch (error) {
        // 处理请求错误，比如打印日志或提示用户
        console.error('获取用户角色失败:', error);
      } finally {
        setLoading(false);
      }
    };

    getUserRole();
    // 空依赖数组表示该副作用仅在组件挂载时执行一次
  }, []);

  // 渲染阶段根据状态展示内容
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <p>用户角色：{userRole.join(', ')}</p>
      {/* 这里可根据userRole编写其他渲染逻辑 */}
    </div>
  );
}

export default YourComponent;

关键说明 #

• useState负责存储数据，只有当状态更新时，组件才会重新渲染，确保JSX能拿到最新的实际数据
• useEffect用来处理异步请求这类副作用操作，避免在组件渲染阶段直接执行异步代码引发的问题
• 加载状态可以避免数据未就绪时JSX渲染空值或出现异常

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