Reactjsとfirebase投稿フォームのエラーメッセージ

Question

新しい、私のfirebase DBにフォームを投稿しようとしているが、イム次のエラーメッセージ

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

を取得しても反応し、この行を指していますここでは、コード

> 37 | const itemsRef = firebase.database().ref();

&のは

以下の私のコードです

App.jsファイル

import React, { Component } from 'react'; 
import { Container, Grid, Form, Button } from 'semantic-ui-react'; 
import firebase from 'firebase'; 
import './FirebaseAdmin'; 
import './App.scss'; 

class RegistrationFormFields extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     firstName: '', 
     lastName: '', 
     email: '' 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 

    // this will help us reset the form later 
    this.baseState = this.state; 
    } 

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

    handleSubmit(e) { 
    e.preventDefault(); 

    /** 
    * store all of everything thats being submitted, 
    * We do this by calling the ref method and passing 
    * in the destination we'd like them to be stored 
    */ 
    const itemsRef = firebase.database().ref(); 

    /** 
    * here we grab the item the user typed in from the state, 
    * and package it into an object so we ship it off to our 
    * Firebase database. 
    */ 
    const item = { 
     firstName: this.state.firstName, 
     lastName: this.state.lastName, 
     email: this.state.email 
    } 

    console.log(item); 

    /** 
    * similar to the Array.push method, 
    * this sends a copy of our object so 
    * that it can be stored in Firebase. 
    */ 
    itemsRef.push(item); 

    /** 
    * here we clear out form values after 
    * everything is done 
    */ 
    this.setState(this.baseState); 
    } 

    render() { 
    return (
     <div className="registration-wrapper"> 
     <Form onSubmit={this.handleSubmit}> 
      <Form.Group widths={2}> 
      <Form.Input label='First name' name="firstName" placeholder='First name' onChange={this.handleChange} value={this.state.firstName} /> 
      <Form.Input label='Last name' name="lastName" placeholder='Last name' onChange={this.handleChange} value={this.state.lastName} /> 
      </Form.Group> 
      <Form.Input label='Email address' name="email" placeholder='Email address' onChange={this.handleChange} value={this.state.email} /> 
      <Button type='submit' value="Submit">Submit</Button> 
     </Form> 
     </div> 
    ); 
    } 
} 

class App extends Component { 
    render() { 
    return (
     <Container> 
     <Grid.Row> 
      <RegistrationFormFields /> 
     </Grid.Row> 
     </Container> 
    ); 
    } 
} 

export default App; 

は、ウェブが、固体何に周りのすべての助けに感謝を探して。私は自分の資格情報を持つfirebase adminの設定ファイルを持っていますが、それは役に立たなかったので、私は再びスタックオーバーフローのおかげでリゾートに行きました。

Answer 1

慎重に調査した後、自分のfirebase設定ファイルを私の反応アプリをレンダリングするメインのindex.jsにインポートして解決策を見つけました