如何使用 React js 从 Firebase 写入和读取实时数据

Question

我是 React 的新手。我已经能够在 Web 应用程序中从 Firebase 读取 json 格式的实时数据，但是，当我尝试将信息从 UI 写入数据库时​​，我只得到代码类型对象而不是写入的数据。更糟糕的是，我在代码中弄乱了其他东西，因为每次用户写入一个字符时，应用程序都会更新值并将信息发送到数据库。我将非常感谢任何正确路径的指示，并提前感谢。

这是出现问题的主页面代码：

import React, { Component } from "react";
import {
  IonPage,
  IonContent,
  IonHeader,
  IonToolbar,
  IonButton,
  IonInput,

} from "@ionic/react";
import TabContainer from "../components/TabContainer";
import firebase from '@firebase/app'

const writeUserData =(userInfo)=> {
  firebase.database().ref('reservas').push({
      userInfo
  }).catch((error)=>{
      //error callback
      console.log('error ' , error)
  })
}

class HomePage extends Component {

  constructor() {
    super();
    this.state = {
      onListPage: true,
      username:[],
      reservas:[]

    };
  }

  componentWillUpdate () {

      const readUsersData = ()=> {
      const nameRef =  firebase.database().ref('reservas')
      nameRef.on('value', (snapshot)=> {
        const state = snapshot.val()
        this.state.reservas =  state
    })

    }
    readUsersData()
    }

  _changedTabs = e => {
    if (e.currentTarget.attributes.tab.value === "tab1") {
      this.setState(() => ({ onListPage: true }));
    } else {
      this.setState(() => ({ onListPage: false }));
    }
  }

  render() {

  const myData = this.state.reservas
  const pushData = (username)  => {
    this.setState({username })
    }

    const user = this.state.username

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar color="primary">

          </IonToolbar>
        </IonHeader>
        <IonContent>
          <TabContainer
            history={this.props.history}
            changedTabs={e => this._changedTabs(e)}
            addItem={this._addItem}
            showAddItemModal={this.state.showAddItemModal}
          />
         </IonContent>

        <IonContent> <li> {JSON.stringify({myData})} </li></IonContent>
        <h1>Introduzca la reserva a confirmar:</h1>
        <IonContent>

          <input 
          onChange= {pushData}
           > 
          </input>  

        <IonButton

         onClick={writeUserData( JSON.stringify(user) )}

         > Escribir </IonButton> 
          <IonButton
         onClick={
          send => pushData(send)     
         }
         > Enviar </IonButton> 

         <IonInput/>
         </IonContent>
      </IonPage>
    );
  }
}

export default HomePage

整个存储库位于：https://github.com/progamandoconro/ReactNativeApps/tree/master/Firebase/WebAdmin/src。谢谢你。

Answer 1

这里有两个问题...

1. 输入的 onChange 会导致事件。您需要从事件中提取值。
2. 您正在推送 onChange，而不是在用户完成写入时推送。因此，请改用 onBlur 或按下按钮。这只会在将焦点放在输入上时发送。这意味着您应该在发送之前添加一个状态值来存储他们键入的值。见下文：

import React, { Component } from "react";
import {
  IonPage,
  IonContent,
  IonHeader,
  IonToolbar,
  IonButton,
  IonInput,

} from "@ionic/react";
import TabContainer from "../components/TabContainer";
import firebase from '@firebase/app'

const writeUserData =(userInfo)=> {
  firebase.database().ref('reservas').push({
      userInfo
  }).catch((error)=>{
      //error callback
      console.log('error ' , error)
  })
}

class HomePage extends Component {

  constructor() {
    super();
    this.state = {
      onListPage: true,
      username:[],
      reservas:[],
      value: '',

    };
  }

  componentWillUpdate () {

      const readUsersData = ()=> {
      const nameRef =  firebase.database().ref('reservas')
      nameRef.on('value', (snapshot)=> {
        const state = snapshot.val()
        this.state.reservas =  state
    })

    }
    readUsersData()
    }

  _changedTabs = e => {
    if (e.currentTarget.attributes.tab.value === "tab1") {
      this.setState(() => ({ onListPage: true }));
    } else {
      this.setState(() => ({ onListPage: false }));
    }
  }

  render() {

  const myData = this.state.reservas
  const pushData = (username)  => {
    this.setState({username })
    }

    const user = this.state.username

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar color="primary">

          </IonToolbar>
        </IonHeader>
        <IonContent>
          <TabContainer
            history={this.props.history}
            changedTabs={e => this._changedTabs(e)}
            addItem={this._addItem}
            showAddItemModal={this.state.showAddItemModal}
          />
         </IonContent>

        <IonContent> <li> {JSON.stringify({myData})} </li></IonContent>
        <h1>Introduzca la reserva a confirmar:</h1>
        <IonContent>

          <input 
            onChange={e=>this.setState({value: e.target.value})}
            value={this.state.value}
            onBlur={()=>pushData(this.state.value)}
           > 
          </input>  

        <IonButton

         onClick={writeUserData( JSON.stringify(user) )}

         > Escribir </IonButton> 
          <IonButton
         onClick={
          send => pushData(send)     
         }
         > Enviar </IonButton> 

         <IonInput/>
         </IonContent>
      </IonPage>
    );
  }
}

export default HomePage