反應：Firebase監聽器不工作

我在YouTube上關注此屏幕錄像，但對於我而言，我似乎無法讓我的數據庫與我的React應用交談。反應：Firebase監聽器不工作

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，我的數據庫是這樣的：

我在控制檯中發現零錯誤，並且完全沒有想法。任何我做錯了。

任何幫助表示讚賞。提前致謝！

來源

2016-09-04 realph

解決！它必須處理我的Firebase READ規則。有人可以關閉這個。 – realph

正確的做法是回答你的問題，然後接受答案。這也是我的問題，你的問題/答案也讓我得到了正確的答案。 – awwester

@awwester新增答案。 – realph

解決！這個問題與我的Firebase READ規則有關。如果遇到類似問題，請檢查數據庫中的規則。

來源

2016-09-06 22:13:24 realph

反應：Firebase監聽器不工作

回答

相關問題