有时当我按下按钮时它会起作用有时它不起作用答案

【问题标题】：sometimes when I press the button it works sometimes it doesn't work有时当我按下按钮时它会起作用有时它不起作用
【发布时间】：2020-01-10 21:22:04
【问题描述】：

问题：

我想使用 React 和 Firebase 开发一个项目。但是当按钮被反应按下时，它有时会被添加。有时按钮不起作用。这是什么原因？我认为是编码的错误，但我不知道错误是什么。

App.js

import React, { Component } from 'react'
import db from '../Firebase';

const INITIAL_STATE = {
  username: '',
  email: '',
  password: ''
};

export class index extends Component {
  constructor(props){
    super(props);
    this.state = {...INITIAL_STATE};
  }

  onSubmit = () => {
    const{ username, password, email} = this.state;
    db.collection('users').add({
      'username': username,
      'password': password,
      'email': email
    })
    .then(function(docRef) {
      console.log("Document written with ID: ", username);
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });
  }

  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render() {
    const{ username, password, email} = this.state;
    return (
      <div>
        <h2>sign up</h2>
        <div className='container'>
          <form onSubmit={this.onSubmit}>
            <input type='text' 
                  className='form-control mt-2' 
                  placeholder='username' 
                  name='username'
                  onChange={this.onChange}
                  value={username}
                  />
            <input type='email' 
                  className='form-control mt-2' 
                  placeholder='email' 
                  name='email'
                  onChange={this.onChange}
                  value={email}
                  />
            <input type='text' 
                  className='form-control mt-2' 
                  placeholder='password' 
                  name='password'
                  onChange={this.onChange}
                  value={password}
                  />
            <button type='submit' 
                    className='btn btn-dark bg-dark btn-block mt-4'
                    >SIGN UP
            </button>
          </form>
        </div>       
      </div>
    )
  }
}

export default index;

Firebase/index.js

import firebase from '@firebase/app';
import 'firebase/firestore';

firebase.initializeApp({
  apiKey: "***",
  authDomain: "***",
  databaseURL: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***"
})

var db = firebase.firestore();
export default db;

代码如上所示。页面上有“用户名”、“密码”和“电子邮件”字段。每次更改时，函数“onChange”都会起作用并更新“状态”字段。当按下按钮时，它会将信息发送到“firebase”数据库（这正是问题所在。它没有发送到数据库中。）。

【问题讨论】：

您能在控制台中看到错误消息还是静默失败？
@MattAft 控制台没有错误。

标签： javascript reactjs firebase google-cloud-firestore react-router

【解决方案1】：

您不应该在onSubmit 处理程序中调用event.preventDefault() 吗？像这样写：

onSubmit = (event) => {
    event.preventDefault();
    //  your existing code here....
}

【讨论】：

【解决方案2】：

您的状态实现有点错误。尝试控制提交函数中的状态， fire base 函数有没有报错？

【讨论】：