如何将React表单数据存入Firebase实时数据库？FireAdmin环境遇错

看起来你遇到的问题主要是Firebase的初始化和引用方式不对，以及数据推送的格式有误。让我一步步帮你修正：

1. 修正Firebase配置文件的导出 #

你的database.js目前导出的是初始化后的App实例，但我们需要导出完整的Firebase对象才能正确调用database()方法。修改database.js如下：

import * as firebase from 'firebase/app';
// 只导入你需要的Firebase模块，这里我们用数据库所以导入database
import 'firebase/database';
import Config from './app';

// 初始化Firebase App
firebase.initializeApp(Config.firebaseConfig);

// 导出Firebase对象，方便组件调用
export default firebase;

2. 调整组件中的Firebase导入和数据推送逻辑 #

首先更新组件的导入语句，然后修正addMessage函数的写法——注意push()方法需要接收一个对象，而不是两个单独的值，同时建议添加异步操作的错误处理：

import Config from '../config/app';
import firebase from '../config/database'; // 改为导入修正后的firebase对象
import NavBar from './path-to-your-navbar'; // 确保NavBar组件路径正确

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    // 在构造函数中绑定方法，避免每次render重新绑定
    this.handleChange = this.handleChange.bind(this);
    this.addMessage = this.addMessage.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  addMessage(e){
    e.preventDefault();
    
    // 把两个输入框的值整理成一个对象
    const billingData = {
      input1: this.inputEl.value, // 可以改成更有意义的键名，比如name
      input2: this.inputEm.value  // 比如email
    };

    // 推送数据到Firebase数据库的billing节点
    firebase.database().ref('billing').push(billingData)
      .then(() => {
        // 数据保存成功后清空输入框
        this.inputEl.value = '';
        this.inputEm.value = '';
      })
      .catch(error => {
        // 处理可能的错误
        console.error('保存数据时出错:', error);
      });
  }

  render() {
    return (
      <div className="content">
        <NavBar />
        <div className="row">
          <div className="col-md-10">
            <div className="card">
              <form onSubmit={this.addMessage}>
                <input type="text" ref={ el => this.inputEl = el } placeholder="输入内容1"/>
                <input type="text" ref={ em => this.inputEm = em } placeholder="输入内容2"/>
                <input type="submit" value="提交"/>
              </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default YourComponent;

3. 额外注意事项 #

• 确保你已经通过npm install firebase或yarn add firebase安装了Firebase依赖。
• 如果使用Firebase v9+版本，写法会变成模块化导入（比如import { getDatabase, ref, push } from "firebase/database"），但从你的代码看应该是v8版本，上面的写法适用。
• 可以考虑用受控组件代替ref获取输入值（即把输入值绑定到组件state），这样更符合React的数据流规范。

内容的提问来源于stack exchange，提问作者Mahi Parmar