React中如何保存异步函数返回值并在后续使用？

首先纠正你代码里的一个小问题：const roles = await response.role这行，如果response.role只是普通的对象属性（不是异步Promise），不需要加await，直接写const roles = response.role就好。

你现在的核心问题是：async函数调用后返回的是Promise对象，不是直接的返回值，所以const currentRole = getRole()得到的是Promise实例，不是你想要的roles值。在React里，我们通常用状态管理来处理这种异步获取的数据，下面是两种常用的解决方式：

方式一：组件挂载时自动获取（用useState + useEffect） #

这是React组件中处理异步数据最常用的方式：

import { useState, useEffect } from 'react';

// 修正后的getRole函数
const getRole = async () => {
  const response = await roleService.getRole();
  const roles = response.role; // 去掉不必要的await
  return roles;
};

function YourComponent() {
  // 用useState保存角色状态，初始值设为null表示未加载
  const [currentRole, setCurrentRole] = useState(null);

  useEffect(() => {
    // 定义内部异步函数来调用getRole
    const fetchAndSetRole = async () => {
      const fetchedRole = await getRole();
      // 拿到值后更新状态
      setCurrentRole(fetchedRole);
    };

    // 调用这个异步函数
    fetchAndSetRole();
  }, []); // 空依赖数组：只在组件首次挂载时执行一次

  // 处理加载状态
  if (currentRole === null) {
    return <div>加载角色中...</div>;
  }

  return (
    <div>当前用户角色：{currentRole}</div>
  );
}

方式二：在事件回调中获取（比如点击按钮） #

如果是需要用户触发才获取角色（比如点击按钮），可以直接在异步回调里处理：

import { useState } from 'react';

const getRole = async () => {
  const response = await roleService.getRole();
  return response.role;
};

function YourComponent() {
  const [currentRole, setCurrentRole] = useState(null);

  // 异步点击处理函数
  const handleFetchRole = async () => {
    const role = await getRole();
    setCurrentRole(role);
  };

  return (
    <div>
      <button onClick={handleFetchRole}>获取当前角色</button>
      {currentRole && <p>当前角色：{currentRole}</p>}
    </div>
  );
}

简单总结：async函数的返回值必须通过await或者.then()来获取实际结果，在React组件里，我们需要把获取到的值存入状态（useState），这样组件才能根据状态更新渲染。

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