Firebase 响应太慢

Question

大家好，我正在使用 Firebase 实时数据库为我的 React.js Web 应用获取一些数据。

有一个名为Corr_User 的useState 应该存储正确用户名的值。

我有一个 function 从 Firebase 获取用户名：-

 function Login(){

       const path =  firebase.database().ref("users").child(username);
       
        path.once("value")
        .then(snapShot => {            
            setCorr_User(snapShot.child("username").val());
             
        })

当我这样做console.log(Corr_User) 时，它会打印一个空字符串，表明useState 没有更新。 为了确认，我还记录了snapshot.val()。这打印了适当的值。

我可以从中了解到 Firebase 的响应速度太慢，因此我的 useState 没有得到更新。我的理解正确吗？有什么方法可以让我的Login() 函数等待响应？

请帮忙！！提前致谢。

编辑 - 好吧，我猜有点混乱。代码是这样的

 function Login(){
....
.once("value")
.then(snapShot => { // After fetching the data
 
 setCorr_User(snapShot.child("username").val()); // Assigning the value

 console.log(snapShot.val()); // This should be logged first

}) // End of function snapShot()

// This is still inside Login()
 console.log(Corr_User) // But this is logged first

} // End of Login()

由此，我猜到 Firebase 的响应速度太慢了，useState 没有得到相应的更新，因为snapShot.val() 仍然是空的。

Answer 1

数据从 Firebase 异步加载，当数据可用时调用 then。这实际上意味着您的console.log(Corr_User) 在console.log(snapShot.val()) 之前被调用。因此，任何需要数据库数据的代码都必须在then 回调中，或者从那里调用。

对于刚接触异步 API 的开发人员来说，这是一个非常常见的绊脚石，因此我建议研究其中的一些链接：

• Why Does Firebase Lose Reference outside the once() Function?
• Best way to retrieve Firebase data and return it, or an alternative way
• Firebase Query inside function returns null
• Passing variable in parent scope to callback function