反应firebase数组长度0答案

【问题标题】：react firebase array length 0反应firebase数组长度0
【发布时间】：2019-01-13 14:25:49
【问题描述】：

我在 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)}

【问题讨论】：

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

firebase 逻辑是异步的，因此您必须在on 回调中使用setState，否则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 });
    });
}

【讨论】：