带有create-react-app的Firebase 3.5.2不起作用(Firebase 3.5.2 with create-react-app doesn't works)

 我按照这个官方Firebase Youtube指南一步一步地进行了操作。 我想将Firebase用于由create-react-app创建的React应用，就像官方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
            });
        })
    }
 
 现在我可以从数据库中读取数据，但在提交表单时我无法写入数值。 

I followed step by step this official Firebase Youtube guide. I want to use Firebase into a React app created by create-react-app, like the example in the official Firebase channel. I generated the following code with the addiction of a small form: 
 
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>
        )
    }
}
 
No console log error appears, no response from Firebase. What's wrong? Thanks!!
 
update 1:
 
I missed to add the key to the snapshot.value:
 
componentDidMount(){
        const ref = firebase.database().ref().child("names");
        ref.on('value', snapshot => {
            this.setState({
                name: snapshot.val().name
            });
        })
    }
 
Now I can read from DB, but I can't write values when I submit form. 

原文：https://stackoverflow.com/questions/40251130