Чтение данных из Firebase 3 в компонент React с синтаксисом ES6

Question

Я пытаюсь использовать простой случай: прочитайте число, то есть счетчики зарегистрированных пользователей, в моем веб-приложении React из базы данных Firebase и отобразите его, когда страница загружена.

Существует документация для более старых версий React and Firebase, но, похоже, этот вариант использования должен быть выполнен новым способом.

Screenshot of my Firebase Database.

import React from 'react' 
 
import {Badge} from 'react-bootstrap' 
 
var firebase = require('firebase') 
 
var config = { 
 
    apiKey: "MyKey", // redacted key 
 
    authDomain: "dnavid-c48b6.firebaseapp.com", 
 
    databaseURL: "https://dnavid-c48b6.firebaseio.com", 
 
    storageBucket: "dnavid-c48b6.appspot.com", 
 
}; 
 
var firebaseApp = firebase.initializeApp(config); 
 
var UCRef = firebaseApp.database().ref("numberofusers") 
 
class UserCount extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = {usercount: '3'} 
 
    } 
 
    componentDidMount() { 
 
    // this.setState({usercount:4}) // This actually works and displays "4" 
 
    var uc = UCRef.on('value',function(snapshot){return(snapshot.val())}) 
 
    debugger; 
 
    this.setState({usercount:uc}) // This does not work 
 
    } 
 
    render(){ 
 
    return (
 
     <Badge> 
 
     {this.state.usercount} 
 
     </Badge> 
 
    ) 
 
    } 
 
} 
 
export default UserCount;                   

В отладчике Chrome (обратите внимание на команду "отладчик") я получаю в консоли:

> uc <. function(snapshot) { return snapshot.val(); }

И

> uc() Uncaught TypeError: Cannot read property 'val' of undefined(…)

Из которого я бы сделал вывод, что, поскольку моментальный снимок не определен, событие не было вызвано. Но это не звучит логично, как:

1. componentDidMount был оценен (потому что компонент оказанные и выполнение достигает его, когда отладчик останавливается для проверки)
2. Firebase документации утверждает, что событие срабатывает, см ниже "Этот метод запускается один раз, когда слушатель подключен".

событие Значение Вы можете использовать событие значения для чтения статического снимка содержимого на данном пути, как они существовали в момент события. Этот метод запускается один раз, когда слушатель подключается и снова каждый раз данные, включая детей, изменяются. Обратный вызов события передается моментальный снимок, содержащий все данные в этом месте, включая дочерние данные. Если данных нет, то моментальный снимок будет равен нулю.

Итак, слушатель не прилагается? Что происходит?

Answer 1

Вы должны сделать это так:

componentDidMount() { 
    UCRef.on('value', snapshot => { 
     this.setState({usercount: snapshot.val()}); 
    }); 
    } 

UCRef.on('value', func) не вернет вам значение. Вы можете получить его внутри обратного вызова