手动刷新页面时如何强制app.js中的useEffect在其他组件的useEffect之前加载

Posted 2023-03-16

【中文标题】手动刷新页面时如何强制app.js中的useEffect在其他组件的useEffect之前加载

【英文标题】：How to force useEffect in app.js to load before other component's useEffect when refreshing page manually

【发布时间】：2021-11-14 13:20:48

【问题描述】：

我遇到了一些问题，似乎无法为我的问题找到解决方案。问题是当我手动输入假设您的目标 localhost:3000/dashboard 它应该触发 app.js 这是我的根组件和仪表板组件。这里的问题是仪表板组件需要来自商店的用户，它只能在 app.js 的 useEffect 挂钩中获得。为了简化这种方法，问题是仪表板 useEffect 在 app.js useEffect 之前触发，但我想以相反的方式进行，否则仪表板 useEffect 将从商店返回未定义的用户，但用户应该是 null 或真实用户名。

这是我的简化代码以便更好地理解：

App.js -> 在我的商店中设置用户并拥有路线

function App() 

const [ user , dispatch] = useStateValue();

useEffect(() =>
const unsubscribe = auth.onAuthStateChanged((authUser) => 
  if (authUser) 
    dispatch(
      type: 'SET_USER',
      user: authUser
    );
   else 
    dispatch(
      type: 'SET_USER',
      user: null
    );
  
);

return () => 
  unsubscribe();


, []);

console.log('User is >>>', user);

return (
<Router>
  <div className="app">
    <Switch>

      <Route path="/dashboard">
        <Dashboard />
      </Route>

      <Route path="/" >
        <Header />
        <Home />
      </Route>
      
    </Switch>
  </div>
</Router>
);

##############################

Dashboard.js -> 应该从商店中获取用户，以便它可以获取其他数据，但由于用户未定义，因此会发生错误，因为 Dashboard useEffect 发生在 app.js useEffect 之前

const Dashboard = () => 

const [user] = useStateValue();
useEffect(() => 
    console.log(`user is $user`);
    getItemsByUser(user);
, [])

const getItemsByUser = async (user) => 
    const items = await firebaseService.getUserProducts(user);
    console.log(items[0])

这里的主要问题是当我手动刷新页面时，Dashboard useEffect 在 App.js useEffect 之前触发。如果我想在我的标题/导航中导航到 /dashboard，任何事情都应该没问题，但我想介绍手动方法。我该如何解决这个问题？..也许任何类型的中间件都应该有帮助，但我根本找不到任何有用的东西。

【参考方案1】：

将您的效果编程为反应式。

useEffect(() => 
  // This effect now handles all possible values of user.
  // It will also update the Dashboard whenever the user state changes.
  // This is the general approach because react state/context state
  // value updates are asynchronous so consumers must
  // handle undefined state.
  if (user) getItemsByUser(user);
, [user]);

顺便说一句，由于 React 的异步特性，从严格排序的角度考虑解决方案通常没有帮助（比如试图让一件事先于另一件事发生）。相反，组件和钩子中的逻辑应该只用于使用可用的道具/状态并生成正确的 UI。即，它们应该是反应性的。效果只是声明组件的某些依赖项更新时应该运行哪些函数的简单方法。

【讨论】：

有效并真正解决了我的问题，值得最好的答案，谢谢你，我的手动路线现在可以正常工作了