我正在关注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,我的数据库看起来像这样:
我在控制台中出现零错误,完全没有想法。我做错了什么。
感谢任何帮助。提前谢谢!
答案 0 :(得分:3)
解决!此问题与我的Firebase READ规则有关。如果遇到类似的问题,请检查数据库中的规则。