javascript - react : Firebase Listener Not Working

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 规则有关。如果遇到类似问题，请检查数据库中的规则。