Question

我正在尝试从Firebase获取用户数据，这是我的代码。

new_data = {}
const userId = app.auth().currentUser.uid;
    var ref = app.database().ref('users/' + userId);
    
    ref.on("value", function(snapshot) {
      // based on the comments below I added this line 
      console.log(snapshot.val());

      Object.keys(snapshot.val()).map(key => {
        new_data[key] = {}
        Object.entries(snapshot.val()[key]).map(  ([k, v], index) => new_data[key][k.replace("_", "/")] = v )
      })
    })

然后我要检查是否正在获取所需的数据。

console.log("new data is", new_data);
Object.entries(new_data).map( ([key, value]) => console.log("key is", key) ) 
console.log("keys are:", Object.keys(new_data));

new_data保存了我的数据，但是当我遍历它时，我无法获取任何键或值。

这是我在控制台中拥有的image。这使我离开了一段时间，因为这不可能发生！

注意：我正在componentWillMount中调用此函数。

基于@Hardik Satasiya的评论，当我安慰snapshot.val()时得到this。但是，我注意到在打印“ keys are”之后，我得到了它的价值。这意味着从Firebase获取数据时会发生一些延迟。

Answer 1

new_date为null，因为您的函数ref.once（“ value”是异步的...。

您正在查找仅一次发送的数据（例如简单的httpRequest）

componentWillMount返回承诺

const userId = app.auth().currentUser.uid;
// this func return promise(any)
componentWillMount = (userId )=>{
     new_data = {}
     var ref = app.database().ref('users/' + userId);
     return new new Promise((resolve, reject) => {
     // once instead on
         ref.once("value", function(snapshot) {
                 new_data[key] = {}
            Object.entries(snapshot.val()[key]).map(  ([k, v], index) => new_data[key][k.replace("_", "/")] = v )
            resolve(new_data)
           })
    })
     }
 }

您需要在一段时间内（例如网络套接字）观看数据

componentWillMount必须返回一个Observable（rxjs）


// this func return Observable(any)
componentWillMount = (userId )=>{
     new_data = {}
 var ref = app.database().ref('users/' + userId);
 return ref.on("value", function(snapshot) {
       new_data[key] = {}
        Object.entries(snapshot.val()[key]).map(  ([k, v], index) => new_data[key][k.replace("_", "/")] = v )
     return of(new_data);
      })
     }
 }

const userId = app.auth().currentUser.uid;
// every time users value change console.log...
componentWillMount(userId ).subscribe(result => console.log(result))

Answer 2

检查对象不为空
将您存储在本地存储中

 var  isEmpty = function(obj) {
            for (var prop in obj) {
                if (obj.hasOwnProperty(prop))
                    return false;
            }
            return true;
 }
new_data = {}
ref.on("value", function(snapshot) {
    new_data[key] = {}
        Object.entries(snapshot.val()[key]).map(  ([k, v], index) => new_data[key][k.replace("_", "/")] = v )
})
// check object is not empty
if(!isEmpty(new_data )){
//store you result in localstorage
     window.localStorage.setItem('yourData', new_data );
}

反应+ firbase加载数据问题

2 个答案: