带有 create-react-app 的 Firebase 3.5.2 不起作用答案

【问题标题】：Firebase 3.5.2 with create-react-app doesn't works带有 create-react-app 的 Firebase 3.5.2 不起作用
【发布时间】：2016-10-25 23:03:33
【问题描述】：

我一步一步跟着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：

我错过了将 key 添加到 snapshot.value 中：

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

现在我可以从 DB 中读取数据，但在提交表单时无法写入值。

【问题讨论】：

标签： javascript reactjs firebase create-react-app

【解决方案1】：

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

import firebase from 'firebase/app';

在app.js:

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

【讨论】：

感谢 adrice727，我尝试更改导入语句，但没有任何反应...我的导入语句基于更新至 2016 年 8 月的官方 youtube 指南...

【解决方案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 值并实时更新我的组件。

【讨论】：