React：Firebase侦听器不起作用

Question

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

我在控制台中出现零错误，完全没有想法。我做错了什么。

感谢任何帮助。提前谢谢！

Answer 1

解决！此问题与我的Firebase READ规则有关。如果遇到类似的问题，请检查数据库中的规则。