使用React componentDidMount中的child_add通过键访问Firebase数据

Question

我正在尝试Firebase，并且之前已经编写了如下代码，但由于某种原因，我没有达到我的期望。

当下面的React组件挂载时，我希望this.state.clients数组中填充有查询的Firebase数据。问题在于，当组件加载时this.state.clients为空（并且没有错误）。我还包括了我的架构的快照图像。我使用的是“实时数据库”，而不是较新的“ Cloud Firestore”。

谢谢！

代码

import React, {Component} from 'react';
import firebase from 'firebase/app';

class Dashboard extends Component{
    constructor(props){
        super(props)
        this.state = {
            clients: []
        }    

      this.clientsRef = firebase.database().ref('clients')

    }

    componentDidMount(){
       this.clientsRef.on('child_added', snapshot => {
       const client = snapshot.val();
       client.key = snapshot.key;
       this.setState({ clients: this.state.clients.concat( client ) })
     });
    }



    render(){
      console.log(this.state.clients);   // <---- is an empty array after component mounts but *should* contain data per the above firebase query

        return(
          <div>


           <h2>All Clients </h2>

          </div>

        )
    }
}

export default Dashboard

Answer 1

这是一个空数组，因为您在构造函数中将其声明为空数组。 “添加子项”事件尚未触发。如果您转到Firebase控制台并手动将项目添加到“客户端”，则这将触发“添加子项”事件，并且该事件将显示在用户界面中。如果要加载所有现有事件的值，请将“ child_added”替换为“ value”。

Answer 2

我忘记在“规则”标签中设置读取权限