手动刷新页面时，如何在应用程序中强制 useEffect .js在其他组件的使用效果之前加载

Question

我被一些东西卡住了，似乎找不到解决问题的方法。事情是，当我手动输入，让我们说你的目标localhost:3000/dashboard它应该触发app.js这是我的根组件和仪表板组件。这里的问题是仪表板组件需要来自store的用户，它只能在app.js的useEffect钩子中获得。为了简化这种方法，问题是仪表板useEffect在app.js useEffect之前触发，但我想让它以相反的方式，否则仪表板useEffect将从商店返回未定义的用户，但用户应该是空的或真实的用户名。

下面是我的简化代码，以便更好地理解:

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→应该从store中获取user，这样它就可以获取其他数据了但是因为user是未定义的，所以出现了错误因为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之前触发。如果我想导航到/仪表板在我的标题/导航任何应该是好的，但我想覆盖手动方法。我该如何解决这个问题?也许任何类型的中间件都应该有所帮助，但我找不到任何有用的东西。

Answer 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。也就是说，它们应该是反应性的。效果只是一种简单的方式，用来声明当组件的某些依赖项更新时应该运行哪些函数。