0

我一步一步跟着这个官方的 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')
);

应用程序.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
            });
        })
    }

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

4

2 回答 2

0

我相信您需要更改导入语句。在index.js：

import firebase from 'firebase/app';

并在app.js：

import firebase from 'firebase/app';
import 'firebase/database';
于 2016-10-26T00:06:14.963 回答
0

好的，错误是我忘记处理输入值的变化，我错过了在 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 值并实时更新我的​​组件。

于 2016-10-26T08:57:05.907 回答