反应firebase数组长度0

时间:2018-08-06 15:15:15

标签: reactjs firebase firebase-realtime-database

我在firebase和setState中获取了数据, this.state.data数组标记为0。

我不知道为什么,我需要你的帮助。

constructor() {
    super();
    this.state = {
        data:[],
    }
}


componentDidMount(){
    this.getData();
}

getData(){
    const arrayItem = [];
    firebase.database().ref('data').on('value', (snapshot) =>{
        snapshot.forEach(function(childSnap){
            arrayItem.push({
                key:childSnap.key,
                data:childSnap.val()
            })
        })
    })
    this.setState({
        data:arrayItem
    })
}

render() {
    {console.log(this.state.data)}

enter image description here

1 个答案:

答案 0 :(得分:3)

firebase逻辑是异步的,因此您必须在setState回调中使用on,否则arrayItem数组将为空。

示例

getData() {
  firebase
    .database()
    .ref("data")
    .on("value", snapshot => {
      const data = [];

      snapshot.forEach(function(childSnap) {
        data.push({
          key: childSnap.key,
          data: childSnap.val()
        });
      });

      this.setState({ data });
    });
}