Reactjs 将React表单值保存到firebase实时数据库

我已经完成了这段代码，它在编写console.log（）方法时正确地显示了控制台输出，但它没有将代码存储到我的数据库中

它不会显示任何其他错误，但不会将数据存储到数据库中，所以请告诉我要更改什么以存储到数据库中

代码如下：

import React, { Component } from 'react';
    var firebase = require('firebase');
    var uuid = require('uuid');

    var config = {
        apiKey: "AIzaSyDf5i7ULK0JTWYM3_X3wMQPUaaLPRYExC0",
        authDomain: "usurvey-419eb.firebaseapp.com",
        databaseURL: "https://usurvey-419eb.firebaseio.com",
        projectId: "usurvey-419eb",
        storageBucket: "usurvey-419eb.appspot.com",
        messagingSenderId: "395101866940"
      };
      firebase.initializeApp(config);
    class Usurvey extends Component {
      constructor(props)
      {
        super(props);
        this.state={
          uid:uuid.v1(),
          firstName: '',
          lastName:''
        };
        this.submitData=this.submitData.bind(this);
        this.inputData=this.inputData.bind(this);
      }
      submitData()
      {
        document.write({uid: this.state.uid,firstName:this.state.firstName,lastName:this.state.lastName});
        // document.write(this.state.firstName);
        // document.write(this.state.lastName);


        firebase.database().ref('Newdata/'+this.state.uid).set({
          firstName: this.state.firstName,
          lastName: this.state.lastName
        });
      }
      inputData(event)
      {
        var firstName = this.refs.name1.value;
        var lastName = this.refs.name1.value;
        console.log(this.state.uid,this.state.firstName,this.state.lastName);

        this.setState({firstName:firstName, lastName:lastName});
        console.log(this.state.firstName,this.state.lastName);
      }
      render(){
        return(
          <div>
            <form onSubmit={this.submitData}>
              <input type="text" onChange={this.inputData} ref="name1"/>
              <input type="text" onChange={this.inputData} ref="name2"/>
            <input type="submit" />Submit
            </form>
          </div>
        );
      }
    }
    export default Usurvey;

import React，{Component}来自'React'；
var firebase=require（'firebase'）；
var uuid=require（'uuid'）；
变量配置={
apiKey：“AIzaSyDf5i7ULK0JTWYM3_X3WMQPUALPRYEXC0”，
authDomain:“usurvey-419eb.firebaseapp.com”，
数据库URL:“https://usurvey-419eb.firebaseio.com",
项目：“usurvey-419eb”，
storageBucket:“usurvey-419eb.appspot.com”，
messagingSenderId：“395101866940”
};
firebase.initializeApp（配置）；
类Usurvey扩展组件{
建造师（道具）
{
超级（道具）；
这个州={
uid:uuid.v1（），
名字：''，
姓氏：“”
};
this.submitData=this.submitData.bind（this）；
this.inputData=this.inputData.bind（this）；
}
提交数据（）
{
write（{uid:this.state.uid，firstName:this.state.firstName，lastName:this.state.lastName}）；
//文件。写（本。州。名）；
//document.write（this.state.lastName）；
firebase.database（）.ref（'Newdata/'+this.state.uid）.set({
名字：this.state.firstName，
lastName:this.state.lastName
});
}
输入数据（事件）
{
var firstName=this.refs.name1.value；
var lastName=this.refs.name1.value；
log（this.state.uid，this.state.firstName，this.state.lastName）；
this.setState（{firstName:firstName，lastName:lastName}）；
log（this.state.firstName，this.state.lastName）；
}
render（）{
返回(
提交
);
}
}
出口违约高利贷；

提交表单时，必须防止默认行为，否则页面将刷新。将submit事件作为参数传递给submitData（）函数，并防止出现如下默认行为

submitData(event) {
        event.preventDefault();
        firebase
          .database()
          .ref(`Newdata/${this.state.uid}`)
          .set({
            firstName: this.state.firstName,
            lastName: this.state.lastName,
          })

      }

表单是老式的HTML，在单页应用程序出现之前就已经存在了，因此在react这样的新奇框架中使用表单时，您必须明确告诉它不要自动重新加载页面。默认情况下，它会重新加载，因为在出现单页应用程序之前，web通常都是这样工作的

提供了所有代码，并从数据库onMount添加了一个控制台日志，以显示正在存储和检索数据。复制到编辑器中，它应该可以工作

import React, { Component } from 'react';
const firebase = require('firebase');
const uuid = require('uuid');

const config = {
  apiKey: 'AIzaSyDf5i7ULK0JTWYM3_X3wMQPUaaLPRYExC0',
  authDomain: 'usurvey-419eb.firebaseapp.com',
  databaseURL: 'https://usurvey-419eb.firebaseio.com',
  projectId: 'usurvey-419eb',
  storageBucket: 'usurvey-419eb.appspot.com',
  messagingSenderId: '395101866940',
};
firebase.initializeApp(config);

class Usurvey extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: uuid.v1(),
      firstName: '',
      lastName: '',
    };
    this.submitData = this.submitData.bind(this);
    this.inputData = this.inputData.bind(this);
  }

  componentDidMount() {
    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .on('value', snap => console.log('from db', snap.val()));
  }

  submitData(event) {
    event.preventDefault();
    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .set({
        firstName: this.state.firstName,
        lastName: this.state.lastName,
      })
      .catch(error => console.log(error));
  }
  inputData(event) {
    const firstName = this.refs.name1.value;
    const lastName = this.refs.name2.value;
    this.setState({ firstName, lastName });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.submitData}>
          <input type="text" onChange={this.inputData} ref="name1" />
          <input type="text" onChange={this.inputData} ref="name2" />
          <input type="submit" />Submit
        </form>
      </div>
    );
  }
}
export default Usurvey;

import React，{Component}来自'React'；
const firebase=require（'firebase'）；
const uuid=require（'uuid'）；
常量配置={
apiKey:“AIzaSyDf5i7ULK0JTWYM3_x3WMQPUALPRYEXC0”，
authDomain:'usurvey-419eb.firebaseapp.com'，
数据库URL:'https://usurvey-419eb.firebaseio.com',
项目：“usurvey-419eb”，
storageBucket:“usurvey-419eb.appspot.com”，
messagingSenderId:'395101866940'，
};
firebase.initializeApp（配置）；
类Usurvey扩展组件{
建造师（道具）{
超级（道具）；
此.state={
uid:uuid.v1（），
名字：''，
姓氏：“”，
};
this.submitData=this.submitData.bind（this）；
this.inputData=this.inputData.bind（this）；
}
componentDidMount（）{
火基
.数据库（）
.ref（`Newdata/${this.state.uid}`）
.on（'value'，snap=>console.log（'from db'，snap.val（））；
}
提交数据（事件）{
event.preventDefault（）；
火基
.数据库（）
.ref（`Newdata/${this.state.uid}`）
.设置({
名字：this.state.firstName，
lastName:this.state.lastName，
})
.catch（错误=>console.log（错误））；
}
输入数据（事件）{
const firstName=this.refs.name1.value；
const lastName=this.refs.name2.value；
this.setState（{firstName，lastName}）；
}
render（）{
返回(
提交
);
}
}
出口违约高利贷；

还更改了const lastName=this.refs.name2.value；，您的had设置为1，这是重复的。我在编辑器中运行了代码，它工作正常。你得到了什么错误？我需要添加componentDidMount（）方法吗？不是，那只是为了证明它能工作。由于我看不到您的firebase控制台，我必须记录数据以显示数据已保存。没有错误，但当我填写数据并点击“回车”页面时，无法重新加载数据，我只能通过cmd+r按钮手动重新加载数据。。。。