路由调用早于状态设置致WalletPage接收null用户ID问题求助

传递方式的核心问题 #

目前的实现存在两个关键问题：

• App组件里的状态初始化依赖useEffect执行，而useEffect是组件挂载后异步触发的，首次渲染时loggedInUserID还是初始null值，此时路由已经渲染WalletPage，导致传入的props为空。
• WalletPage的useEffect只在挂载时执行一次，后续App中loggedInUserID更新后，不会重新触发逻辑，因此无法获取最新的用户ID。

解决步骤 #

1. 同步初始化状态，避免异步延迟 #

把从localStorage读取数据的逻辑放在状态初始化阶段，而不是依赖useEffect，这样组件首次渲染时就有正确的状态值：

// 同步读取localStorage，作为状态初始值
const initialLoginStatus = !!localStorage.getItem('loginStatus');
const initialUserName = localStorage.getItem('loggedInUserName') || '';
const initialUserID = localStorage.getItem('loggedInUserID') || null;

function App() {
  const [loginStatus, setLoginStatus] = useState(initialLoginStatus);
  const [loggedInUserName, setLoggedInUserName] = useState(initialUserName);
  const [loggedInUserID, setLoggedInUserID] = useState(initialUserID);

  // 原useEffect可以保留，用于监听localStorage的手动修改（可选）
  useEffect(() => {
    // 比如监听storage事件，处理其他页面修改localStorage的情况
  }, []);

  // 路由代码...
}

2. 让WalletPage响应props更新 #

修改WalletPage的useEffect，添加props.loggedInUserID作为依赖项，同时增加空值判断，避免无效调用：

useEffect(()=>{    
  console.log("PROPS:", props.loggedInUserID);
  // 仅当userID有效时执行逻辑
  if(props.loggedInUserID){
    setLoggedInUserID(props.loggedInUserID);
    getAllWalletIDBelongingToUser(props.loggedInUserID);
  }
},[props.loggedInUserID]) // 依赖props，更新时重新执行

3. 可选：添加路由拦截（推荐） #

如果未登录用户不允许访问WalletPage，直接在路由层面做跳转拦截，从根源避免空值传递：

<Route 
  path='/wallet' 
  element={
    loginStatus ? 
      <WalletPage loggedInUserID={loggedInUserID} /> : 
      <Navigate to='/login' />
  }
/>

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