Question

ReactJS＆amp; Firebase，尝试将表单发布到我的firebase数据库，但是我收到以下错误消息

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管理员配置文件与我的凭据，但没有帮助，所以我决定再次感谢堆栈溢出。

Answer 1

在仔细研究了一些之后，我通过将我的firebase配置文件导入到我的主index.js中找到了我的解决方案，该主文件呈现了我的反应应用

Reactjs和firebase发布表单错误消息

1 个答案: