Question

我是React的新手。我已经能够在Web App中从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

所以这里有2个问题...

输入的onChange导致事件。您需要从事件中提取值。
您正在推动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

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

1 个答案: