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')
);

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
            });
        })
    }

DB から読み取ることができるようになりましたが、フォームを送信するときに値を書き込むことができません。

4

2 に答える 2

0

import ステートメントを変更する必要があると思います。でindex.js：

import firebase from 'firebase/app';

そしてでapp.js：

import firebase from 'firebase/app';
import 'firebase/database';
于 2016-10-26T00:06:14.963 に答える