在uselayouteeffect中使用api更新状态在绘制组件之前不起作用

Question

useLayoutEffect(() => {
getUser()
.then(res => setGlobalUser(res.data))
.catch(err => console.log(err))
})

getUser方法存在于API调用中。我试图在用户刷新网站时显示用户配置文件。这就是为什么我使用useLayoutEffect，因为我想在绘制之前更新globalUser状态，然后在绘制网页时显示它。

但是当我刷新页面时，globalUser状态值是null，然后快速重新渲染，然后在网页上显示用户配置文件信息。

Answer 1

useLayoutEffect是一个钩子，主要用于在绘制前读取组件的布局。它不是为数据获取而设计的。你想要的可以通过useEffect和条件渲染来实现。例如:

useEffect(() => {
getUser()
.then(res => setGlobalUser(res.data))
.catch(err => console.log(err))
})
if(!globalUser) {
// you can return a loader here if you want
return null;
}