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?
Passing variable in parent scope to callback function

Firebase 响应太慢

Firebase response is too slow

javascript

reactjs

firebase-realtime-database

use-state