React中useState结合async/await返回undefined问题排查与解决

为什么状态更新没立刻生效？ #

React 的setState是异步操作，调用setToken后不会马上更新组件的token状态。你在showToken里调用asyncCall后立刻console.log(token)，打印的还是当前渲染周期里的旧值（初始为undefined），要等组件重新渲染后，token才会更新为新值。

另外你的fetchToken函数存在逻辑错误：返回{ authToken: token }时，这里的token是未声明的状态变量，根本拿不到接口返回的值，应该使用接口返回结果里的 token 字段。

怎么结合 async 函数正常运行？ #

1. 修正 fetchToken 的逻辑错误 #

把返回对象改成使用接口返回的实际 token 值，示例如下：

async function fetchToken() {
  const res = await fetch("https://func-get-token.net/token");
  const result = await res.json();
  // 假设接口返回的 JSON 包含 token 字段，替换为实际字段名
  return { authToken: result.token };
}

2. 正确处理异步状态更新 #

• 设置初始状态默认值：将useState()改为useState("")或useState(null)，避免初始undefined导致后续代码崩溃。
• 用 useEffect 监听状态变化：如果后续业务逻辑依赖token，可以通过useEffect监听token的变化，状态更新后自动执行对应逻辑。
• 添加异步请求错误处理：给fetch套上try/catch，防止请求失败导致应用崩溃。
• 增加加载状态控制：避免用户重复点击触发多次请求。

修复后的完整代码 #

export const Example = () => {
  // 初始设为空字符串，避免 undefined
  const [token, setToken] = useState("");
  // 加载状态，防止重复请求
  const [isLoading, setIsLoading] = useState(false);

  async function fetchToken() {
    const res = await fetch("https://func-get-token.net/token");
    const result = await res.json();
    // 使用接口返回的 token 值
    return { authToken: result.token };
  }

  async function asyncCall() {
    if (isLoading) return;
    setIsLoading(true);
    try {
      const tokenobj = await fetchToken();
      setToken(tokenobj);
      // 若需立刻使用最新值，直接用 tokenobj 即可
      console.log("刚获取的 token:", tokenobj);
    } catch (error) {
      console.error("获取 token 失败:", error);
    } finally {
      setIsLoading(false);
    }
  }

  const showToken = () => {
    asyncCall();
  };

  // 监听 token 变化，更新后执行后续逻辑
  useEffect(() => {
    if (token) {
      console.log("token 已更新:", token);
      // 此处放置依赖 token 的业务代码，如请求其他接口、存入本地存储等
    }
  }, [token]);

  return (
    <>
      <button onClick={showToken} disabled={isLoading}>
        {isLoading ? "加载中..." : "Test token value"}
      </button>
    </>
  );
};

核心要点 #

• setState是异步的，不要在调用后立刻读取状态，要么直接使用异步请求返回的结果，要么通过useEffect监听状态变化。
• 初始状态要避免undefined，或者在后续代码中加入if (token)的判断，防止应用崩溃。
• 异步请求必须添加错误处理，否则网络异常会直接导致组件崩溃。

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