Reagieren: Firebase Listener funktioniert nicht

Question

Ich bin diesem Screencast auf YouTube gefolgt, aber für das Leben von mir kann ich nicht scheinen, meine Datenbank mit meiner React App zu sprechen. Die componentDidMount()-Funktion wird ausgeführt, aber die .on() Listener-Funktion scheint nicht zu zünden.

Mein Code sieht wie folgt aus:

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import * as firebase from 'firebase'; 

var config = { 
    // config from firebase db lives here 
}; 

firebase.initializeApp(config); 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

App.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import * as firebase from 'firebase'; 

class App extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     speed: 10 
    } 
    } 

    componentDidMount() { 
    const rootRef = firebase.database().ref().child('react'); 
    const speedRef = rootRef.child('speed'); 

    speedRef.on('value', snap => { 
     this.setState({ 
     speed: snap.val() 
     }); 
    }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <h1>{this.state.speed}</h1> 
     </div> 
    ); 
    } 
} 

export default App; 

FWIW, sieht meine db wie folgt aus:

Ich bekomme Null Fehler in der Konsole, und völlig aus Ideen. Alles, was ich falsch mache.

Jede Hilfe wird geschätzt. Danke im Voraus!

Answer 1

Gelöst! Dieses Problem hat mit meinen Firebase READ-Regeln zu tun. Überprüfen Sie die Regeln in Ihrer Datenbank, wenn Sie auf ein ähnliches Problem stoßen.