ReactJS：根据userData加载状态条件渲染子组件的疑问

我完全懂你的顾虑——这种把currentUser通过props层层传递给所有子组件，还得在每个需要的地方重复写加载判断的方式，确实会让代码变得臃肿、难维护，而且很容易因为漏写判断导致bug。咱们来聊聊几个更优雅的解决方案：

1. 用Redux的useSelector直接取状态，抽离加载逻辑为自定义Hook #

不用再把currentUser从顶层组件一路往下传，每个需要用到登录用户信息的组件，直接通过useSelector从Redux store里获取：

import { useSelector } from 'react-redux';

const PersonalDashboard = () => {
  const currentUser = useSelector(state => state.auth.currentUser);
  // ... 组件逻辑
};

接着把加载判断的逻辑抽成可复用的自定义Hook，避免每个组件重复写相同代码：

// hooks/useAuth.js
import { useSelector } from 'react-redux';
import { isEmpty } from 'your-util-library';

export const useAuth = () => {
  const currentUser = useSelector(state => state.auth.currentUser);
  const isLoading = isEmpty(currentUser);

  return { currentUser, isLoading };
};

之后组件里就能简洁使用：

const PersonalDashboard = () => {
  const { currentUser, isLoading } = useAuth();

  if (isLoading) return <Loading />;

  return (
    // 渲染仪表盘内容
  );
};

2. 用React Context封装登录状态（适配局部场景） #

如果登录状态的使用范围比较集中，或者不想全依赖Redux，也可以把登录状态和加载状态封装到React Context中：

// contexts/AuthContext.js
import { createContext, useContext, useSelector } from 'react';
import { isEmpty } from 'your-util-library';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const currentUser = useSelector(state => state.auth.currentUser);
  const isLoading = isEmpty(currentUser);

  return (
    <AuthContext.Provider value={{ currentUser, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

在顶层组件（比如App.js）包裹AuthProvider后，下层组件直接用useAuth Hook获取状态，同样能避免props drilling，逻辑也更集中。

3. 顶层统一处理加载，下层组件无需重复判断 #

你可以把加载判断放到路由或者App的最顶层，而不是每个子组件都写。比如在路由入口处：

import { useSelector } from 'react-redux';
import { isEmpty } from 'your-util-library';

const App = () => {
  const currentUser = useSelector(state => state.auth.currentUser);
  const isLoading = isEmpty(currentUser);

  if (isLoading) {
    return <Loading />;
  }

  return (
    <Routes>
      <Route path="/dashboard" element={<PersonalDashboard />} />
      {/* 其他路由 */}
    </Routes>
  );
};

这样所有需要登录状态的页面组件，都默认能拿到已加载完成的currentUser，不用再自己处理加载逻辑，代码会清爽很多。

这些方案核心都是减少重复代码、避免props drilling，让组件更专注于自身的业务逻辑，而不是状态传递和加载判断的琐碎工作。

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