反应本机设置功能不更新变量

Question

我有以下代码

    const fetchCurrentUser = async () => {
        let u = await firebase.auth().currentUser;
        setUser(u)
        console.log(user)
        let prof = await firebase.firestore().collection('abc').doc(u.uid).get();
        prof === null ? prof = await firebase.firestore().collection('efg').doc(u.uid).get() : null;
        setUserProfile(prof);
        console.log(u)
        console.log(prof)
        console.log(user)
        console.log(userProfile)
    }

    useEffect(() => {
        fetchCurrentUser();
    }, [])

代码的输出是

someObject()
someObject()
null
null

当 u 和 prof 不为 null 并且就在我设置 user = u 和 profile = prof 的上方时，用户和配置文件如何为 null？

发生的事情是我第一次获得非空用户，然后用户变为空（没有任何操作）不知道这怎么可能。因为我正在获取的用户来自 firebase，所以它不应该在没有任何操作的情况下改变

Answer 1

setState() 异步发生，这意味着当您 console.log() 变量时，变量仍然为空。您可以在 useEffect() 中等待状态更新，使用 useEffect() 作为对 setState() 的回调。

Answer 2

在 React 中，设置状态是异步的，所以如果你在下一行立即记录，你将无法看到更新后的状态。

在这种情况下，您需要做的是在依赖数组中使用useEffect 和user，以便在user 更改时采取措施。

    const fetchCurrentUser = async () => {
        let u = await firebase.auth().currentUser;
        setUser(u)
    }

    useEffect(() => {
        fetchCurrentUser();
    }, [])

    useEffect(() => {
      (async () => {
        if(user) { //to ensure that we only take actions if user is actually set
        console.log(user)
        let prof = await firebase.firestore().collection('abc').doc(u.uid).get();
        prof === null ? prof = await firebase.firestore().collection('efg').doc(u.uid).get() : null;
        setUserProfile(prof);
        console.log(u)
        console.log(prof)
        console.log(user)
        console.log(userProfile)
      })()
    }, [user]) //only trigger function when user state changes (and for first render)