React（Redux）页面初始加载不渲染内容，需手动刷新问题求助

核心问题推测 #

初始加载时this.props.userinfo.id大概率未获取到，导致后续Redux Action的API调用失败，页面依赖的accountinfo、budgetinfo没有数据注入，因此内容无法渲染；刷新页面时，用户信息可能已通过Redux持久化（如localStorage）或重新加载完成，能正常拿到id并获取数据，页面便正常渲染。

具体解决步骤 #

1. 确保userinfo加载完成后再执行API调用 #

修改Home组件的componentDidMount，先判断用户信息是否存在，避免使用未定义的id：

componentDidMount() {
  const { userinfo } = this.props;
  // 先校验用户信息及id是否存在
  if (!userinfo?.id) {
    // 可根据业务场景处理，比如跳转登录页或等待加载
    return;
  }

  const id = userinfo.id;
  axios.get(`http://localhost:8081/api/accounts/check/${id}`)
    .then(response => {
      console.log(response);
      if (response.status === 404) {
        window.location.assign('/activate');
      }
    })
    .catch(err => {
      console.log(err);
      window.location.assign('/activate');
    });

  this.props.initalAccountState(id);
  this.props.getBudgetsApi(id);
}

同时添加componentDidUpdate监听userinfo的变化，当用户信息从无到有加载完成时，触发数据获取：

componentDidUpdate(prevProps) {
  const { userinfo } = this.props;
  // 仅当userinfo从无到有且id存在时执行逻辑
  if (!prevProps.userinfo?.id && userinfo?.id) {
    const id = userinfo.id;
    axios.get(`http://localhost:8081/api/accounts/check/${id}`)
      .then(response => {
        console.log(response);
        if (response.status === 404) {
          window.location.assign('/activate');
        }
      })
      .catch(err => {
        console.log(err);
        window.location.assign('/activate');
      });

    this.props.initalAccountState(id);
    this.props.getBudgetsApi(id);
  }
}

2. 为组件添加加载状态判断 #

在Home组件的render方法中，先判断核心数据是否加载完成，未完成时显示加载提示，避免空页面：

render() {
  const { accountinfo, budgetinfo } = this.props;

  // 核心数据未加载时显示加载状态
  if (!accountinfo || !budgetinfo) {
    return <div>加载中...</div>;
  }

  // 数据加载完成后渲染正常页面内容
  return (
    // 你的页面内容代码
  );
}

3. 检查PrivateRoute的逻辑 #

确保PrivateRoutes组件在用户信息（userinfo）加载完成后，再渲染Home页面。示例逻辑如下：

const PrivateRoutes = () => {
  const { userinfo } = useSelector(state => state.user);
  const location = useLocation();

  // 用户信息未加载完成时，显示验证中状态
  if (userinfo === null) {
    return <div>验证中...</div>;
  }

  return userinfo ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
};

4. 规范Redux初始状态 #

确认Redux中user的初始状态设置合理，便于判断加载状态：

// user reducer示例
const initialState = {
  user: null, // 初始设为null，而非undefined，便于区分未加载和无用户状态
  // 其他相关状态
};

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