Javascript 现在正在表单提交中调用函数

我正在学习React课程，在本模块中，我正在学习如何将数据插入Firebase数据库，但我仍停留在当前课程中，因为我的代码没有在数据库中插入数据，试图调试问题，我发现“地籍”函数没有被调用。有人知道为什么不在数据库中插入数据吗

我没有得到任何错误，唯一的问题是我在输入字段中插入数据，然后单击按钮，但它不会将数据插入数据库

import React, { Component } from 'react';
import firebase from 'firebase'

export default class App extends Component {
  constructor (props){
    super(props);
    this.state = {
      tokenInput: '',
      token: 'Carregando',
      nome: '',
      idade: '',
    };

    this.cadastrar = this.cadastrar.bind(this);

      // Your web app's Firebase configuration
    let firebaseConfig = {
      apiKey: "xxxxxx",
      authDomain: "xxxxx",
      databaseURL: "xxxx",
      projectId: "xxxx",
      storageBucket: "xxxx",
      messagingSenderId: "xxxx",
      appId: "xxxx"
    };
    // Initialize Firebase
    if(!firebase.apps.length){
    firebase.initializeApp(firebaseConfig)};

    // Olheiro
    /*
      firebase.database().ref('token').on('value', (snapShot) => {
      let state = this.state;
      state.token = snapShot.val().token;
      this.setState(state);
    });
    */

    firebase.database().ref('token').on('value', (snapshot) => {
      let state = this.state;
      state.token = snapshot.val();
      this.setState(state);
    });

    firebase.database().ref('usuarios').child(1).on('value', (snapShot) => {
      let state = this.state;
      state.nome = snapShot.val().nome;
      state.idade = snapShot.val().idade;
      this.setState(state);
    });

  }

  cadastrar(e){
    firebase.database.ref('token').set(this.state.tokenInput);
    e.preventDefault();
  }

  render(){
    const { token, nome , idade} = this.state;
    return(
      <div>
        <form onSubmit={this.cadastrar}>
          <input type='text' value={this.state.tokenInput} 
          onChange={(e) => this.setState({tokenInput: e.target.value})} />
          <button type='submit'>Cadastrar1</button>
        </form>

        <h1>Token: {token} </h1>
        <h1>Nome: {nome} </h1>
        <h1>Idade: {idade} </h1>
      </div>
      );
    }
}

从“React”导入React，{Component}；
从“firebase”导入firebase
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
令牌输入：“”，
标记：“Carregando”，
诺姆：“，
idade:“”，
};
this.cadastar=this.cadastar.bind（this）；
//您的web应用程序的Firebase配置
让firebaseConfig={
apiKey:“xxxxxx”，
authDomain:“xxxxx”，
数据库URL:“xxxx”，
投影：“xxxx”，
存储桶：“xxxx”，
messagingSenderId:“xxxx”，
appId:“xxxx”
};
//初始化Firebase
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）}；
//奥列罗
/*
firebase.database（）.ref（'token'）。on（'value'，（快照）=>{
让state=this.state；
state.token=snapShot.val（）.token；
本.设置状态（状态）；
});
*/
firebase.database（）.ref（'token'）。on（'value'，（快照）=>{
让state=this.state；
state.token=snapshot.val（）；
本.设置状态（状态）；
});
firebase.database（）.ref（'usuarios'）.child（1）.on（'value'，（快照）=>{
让state=this.state；
state.nome=snapShot.val（）.nome；
state.idade=snapShot.val（）.idade；
本.设置状态（状态）；
});
}
地籍（e）{
firebase.database.ref（'token'）.set（this.state.tokenInput）；
e、 预防默认值（）；
}
render（）{
const{token，nome，idade}=this.state；
返回(
this.setState（{tokenInput:e.target.value}）}/>
地籍1
令牌：{Token}
Nome:{Nome}
Idade:{Idade}
);
}
}

可能没有调用此函数，但控制台可能在从表单提交重新加载页面之前显示TypeError，因为

database.ref

不是函数。然后，代码将在到达

e.preventDefault（）

行之前停止执行。为了帮助将来捕获这些错误，我建议将

preventDefault

调用放在处理程序的顶部，这样控制台输出就不会丢失

为了修复TypeError，我认为您需要将其更改为

firebase.database（）.ref（'token'）

完整功能：

地籍（e）{
e、 预防默认值（）；
firebase.database.ref（'token'）.set（this.state.tokenInput）；
}

有控制台错误吗？我认为

firebase.database.ref（'token'）

应该是

firebase.database（）.ref（'token'）

你是对的，问题是我忘记了firebase.database的（），非常感谢

cadastrar(e){
  firebase.database.ref('token').set(this.state.tokenInput);
  e.preventDefault();
}