React:Firebase侦听器不起作用

时间:2016-09-04 22:40:40

标签: javascript reactjs firebase firebase-realtime-database

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:3)

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