在绘制组件之前，在 useLayoutEffect 中使用 api 更新 state 不起作用

Question

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

getUser方法存在 API 次调用。 我试图在用户刷新网站时显示用户个人资料。 这就是为什么我使用useLayoutEffect的原因，因为我想在绘制之前更新globalUser state，然后在绘制 web 页面时显示它。

但是当我刷新页面时， globalUser state 的值是null ，然后快速重新渲染然后在 web 页面上显示用户个人资料信息。

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;
}