React异步函数返回Promise而非实际对象的问题求助

你遇到的核心问题是：调用异步函数时没有用await关键字，所以userData拿到的是Promise对象而非实际数据。但还要注意，React组件的主渲染函数不能是异步的，不能直接在组件体里用await，得结合useEffect和状态管理来处理异步逻辑。

解决步骤与修改后的代码 #

1. 用useState管理用户数据和加载状态 #

在组件里添加状态，用来存储用户的实际数据，同时处理加载中的状态，避免数据还没获取到就渲染内容。

2. 用useEffect执行异步逻辑 #

把获取用户数据的异步操作放到useEffect里，确保组件挂载后再执行，拿到数据后再dispatch到Redux。

修改后的ProtectedRoute代码 #

import { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';

const ProtectedRoute = ({ children }) => {
  const dispatch = useDispatch();
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const storedData = JSON.parse(localStorage.getItem("userData"));
        if (!storedData) {
          // 如果本地没有数据，直接跳转到登录页
          window.location.href = "/login";
          return;
        }
        // 调用异步函数时加await，拿到实际数据
        const fetchedData = await getUserData(storedData.userId);
        setUserData(fetchedData);
        dispatch(authenticate({ token: storedData.token, userData: fetchedData }));
      } catch (error) {
        console.error('获取用户数据失败:', error);
        // 出错时也跳转到登录页
        window.location.href = "/login";
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserData();
  }, [dispatch]);

  // 加载中时可以显示加载提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 如果没有用户数据，跳转到登录页
  if (!userData) {
    return <Navigate to="/login" replace />;
  }

  // 数据准备好后渲染子组件
  return children;
};

关键说明 #

• 必须用await调用异步函数：getUserData是async函数，调用时必须加await才能拿到返回的实际数据，否则只会得到Promise对象。
• 组件不能是异步函数：React组件的主函数不能标记为async，所以要把异步逻辑放到useEffect里执行，通过状态来更新组件渲染。
• 处理加载和错误状态：添加加载状态可以避免用户看到空白页面，错误处理能在数据获取失败时引导用户重新登录。

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