反应：Firebase侦听器不起作用

我正在YouTube上观看此截屏视频，但是从我的一生来看，我似乎无法让我的数据库与我的React应用进行交流。

似乎componentDidMount()正在运行该函数，但.on()监听器函数未触发。

我的代码如下所示：

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，我的数据库看起来像这样：

我在控制台中得到零错误，并且完全没有想法。我做错了什么。

任何帮助表示赞赏。提前致谢！