在 useEffect 挂钩中使用时，Mobx 可观察值为 null

【问题标题】：Mobx observale value is null when used in useEffect hook在 useEffect 挂钩中使用时，Mobx 可观察值为 null
【发布时间】：2020-12-13 05:30:01
【问题描述】：

我正在尝试根据从 mobx 中的 authStatechanged 获得的 uid 从 firestore 获取用户数据。但是当我尝试在 useEffect 中访问它时，它显示值未定义，但如果我在正文中打印它的值，它会在轻微延迟后显示。我应该怎样才能获得使用效果。

index.js

 useEffect(() => {
      setposts(props.posts);
    authUser && setuser(authUser) ; //it shows authuser is null
    
    }, []);

  return (
   
 <Layout>
     
 {authUser && authUser.uid}  //it gives correct value after delay

</Layout>


store.js

class Store {

  @observable authUser = null


  constructor(){
       
        const result = firebase.auth().onAuthStateChanged(authUser => { 

        if(authUser){
          this.authUser = authUser
        }
       })
    }
}

【问题讨论】：

标签： firebase firebase-authentication react-hooks next.js mobx

【解决方案1】：

firebase.auth() 是异步函数，所以当你第一次渲染组件时，authUser 是null。一段时间后，此调用与用户一起解决，然后调用 onAuthStateChanged 并设置用户。但是您的 useEffect 已经被调用，并且由于您将空数组 [] 指定为效果依赖项，因此不会再次调用它。

你可以像这样使用第二个效果，例如：

 useEffect(() => {
      authUser && setuser(authUser);
    }, [authUser]);

每次authUser 更改时都会调用此效果。

但同时我也不太明白你为什么需要setuser，因为它存储在你的商店中，你可以立即使用它。

【讨论】：