Получите доступ к данным базы данных по ключу, используя child_added в React componentDidMount

Question

Я экспериментирую с Firebase и уже писал код, подобный следующему, но по какой-то причине я не получаю то, что ожидаю.

Когда компонент React ниже монтируется, я ожидаю, что массив this.state.clients будет заполнен запрошенными данными из базы данных. Проблема в том, что при загрузке компонента this.state.clients пусто (и ошибок нет). Я также включил снимок моей схемы. Я использую "базу данных reatime", а не новую "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

Я забыл установить права чтения на вкладке "правила"

Answer 2

Это пустой массив, потому что вы объявили его пустым массивом в конструкторе.Событие 'child добавил' еще не произошло.Если вы зайдете в консоль Firebase и вручную добавите элемент в «клиенты», это вызовет событие «добавленный дочерний элемент», и это событие отобразится в вашем пользовательском интерфейсе.Замените 'child_added' на 'value', если вы хотите, чтобы значение всех существующих событий загружалось.