带有 create-react-app 的 Firebase 3.5.2 不工作

Question

我一步步跟着this official Firebase Youtube guide。我想在 create-react-app 创建的 React 应用程序中使用 Firebase，就像官方 Firebase 频道中的示例一样。我用小表格的瘾生成了以下代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as firebase from 'firebase'

const config = {
    apiKey: "SUPERSECRET",
    authDomain: "SUPERSECRET.firebaseapp.com",
    databaseURL: "https://SUPERSECRET.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "SUPERSECRET"
};

firebase.initializeApp(config);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

app.js

import React, { Component } from 'react';
import * as firebase from 'firebase';

export default class PageOne extends Component{

    constructor(){
        super();
        this.state = {
            name: "example"
        }
    }

    submitValue(e){
        e.preventDefault();
        console.log("pressed");
        const ref = firebase.database().ref().child("names");
        ref.set({
            name: e.target.value
        })

    }

    componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val()
            });
        })
    }

    render(){
        return(
            <div>
                <h1>{this.state.name}</h1>
                <form onSubmit={this.submitValue.bind(this)} className="form">
                    <input type="text" id="nameField"/>
                    <input type="submit" />
                </form>
            </div>
        )
    }
}

没有出现控制台日志错误，Firebase 没有响应。怎么了？谢谢！！

更新 1：

我错过了将密钥添加到 snapshot.value:

componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val().name
            });
        })
    }

现在我可以从数据库中读取，但是当我提交表单时我不能写值。

Answer 1

我认为您需要更改导入语句。在 index.js:

import firebase from 'firebase/app';

在app.js中：

import firebase from 'firebase/app';
import 'firebase/database';

Answer 2

好的，错误是我忘记处理输入值的变化，我错过了在 snapshot.val() 中写 .name 这是 App.js:

中的正确代码

import React, { Component } from 'react';
import * as firebase from 'firebase';

export default class PageOne extends Component{

    constructor(props){
        super(props);
        this.submitValue = this.submitValue.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            name: "Pippo",
            value: ""
        }
    }

    handleChange(e) {
        this.setState({value: e.target.value});
    }

    submitValue(e){
        e.preventDefault();
        const ref = firebase.database().ref().child("names");
        ref.set({
            name: this.state.value
        })
    }

    componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val().name
            });
        })
    }

    render(){
        return(
            <div>
                <h1>{this.state.name}</h1>
                <form onSubmit={this.submitValue} className="form">
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    <input type="submit" />
                </form>
            </div>
        )
    }
}

现在值可以正确发送到 Firebase 值并实时更新我的组件。

带有 create-react-app 的 Firebase 3.5.2 不工作

Firebase 3.5.2 with create-react-app doesn't works

javascript

reactjs

firebase

create-react-app