Reactjs 和 firebase 发布表单错误消息

Question

ReactJS 和 Firebase 的新手，尝试将表单发布到我的 firebase 数据库，但我收到以下错误消息

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

而且react也是指向这行代码

> 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 管理配置文件，但这没有帮助，所以我决定再次求助于堆栈溢出。

Answer 1

经过仔细研究后，我通过将我的 firebase 配置文件导入我的主 index.js 来呈现我的反应应用程序，从而找到了我的解决方案