Question

我正在尝试从TextInput字段中同时推送数据，并为Firebase实时数据库创建时间戳。但是，在加载应用程序时，第一次单击“提交”仅提交textInput而不提交“时间戳”

这是文件的简单版本，

import React, { Component } from 'react';  
import { View, Text, TouchableHighlight, StyleSheet, 
ImageBackground, TextInput, Alert, Picker, TouchableWithoutFeedback, 
Keyboard } from 'react-native';

import React, { Component } from 'react';  
import { View, Text, TouchableHighlight, StyleSheet, 
ImageBackground, TextInput, Alert, Picker, TouchableWithoutFeedback, 
Keyboard } from 'react-native';

import { db } from '../config';


let date = new Date().getDate(); //Current Date

let month = new Date().getMonth() + 1; //Current Month

let year = new Date().getFullYear(); //Current Year

let hours = new Date().getHours(); //Current Hours

let min = new Date().getMinutes(); //Current Minutes

let sec = new Date().getSeconds(); //Current Seconds

let currentTimeAndDate


const updateDatabase = item => {
  db.ref('/Database/...').push({
    Amount: item,
    time: currentTimeAndDate
  });
};

export default class AddItem extends Component {  

constructor(props) {
  super (props);

  this.state = {
    pickerSelection: "default value!",
    date: " "

  };
}


handleSubmit = () => {    

  this.setState({
    //Setting the value of the date time
    date:
      date + '/' + month + '/' + year + ' ' + hours + ':' + min + 
':' + sec,

  });

  currentTimeAndDate = this.state.date

if (this.state.pickerSelection === "WHATEVER") {
      updateDatabase(this.state.textInputField);
      Alert.alert("database updated!");


//This is a short version of the View:

render() {
    return (

 <View>
  <TouchableHighlight
    onPress={TextInput.CheckTextInputIsEmptyOrNot}
    onPress={this.handleSubmit} 
   >
    <Text style={styles.buttonText}>Update</Text>
    </TouchableHighlight>
 </View>

 );
}

我已经尝试在单击TouchableHighLight时以文本形式显示currentTimeAndDate。加载应用程序后，它没有显示第一次单击，但是第二次显示。

在firebase中，第一次单击时就这样输入数据：

EJDPvodisjpINJI_9
   amount: "(input number fx. 10)"
   time:   " "

第二次单击：

Efvpspodvpoep_10
   amount: "(input number fx. "10")"
   time:   "(the local time of click fx. "8/5/2019 19:28:28")"

如何使它在第一时间发送本地时间？

Answer 1

将currentDateTime传递到您的updateDatabase通话中怎么样？

因此，您可以通过以下方式调用它：

updateDatabase(this.state.textInputField, currentTimeAndDate);

然后函数本身是：

const updateDatabase = (item, time) => {
  db.ref('/Database/...').push({
    Amount: item,
    time: time
  });
};

Answer 2

我找到了解决方法：

setState是异步的，我认为这一定是为什么它在第一次单击提交按钮时就从未发送到数据库的原因。

我现在做了一个函数：SetTimeAndSubmit，它设置时间和状态：日期，然后首先调用handleSubmit方法。第一次将“项目”和“时间”都提交给数据库！参见下面的代码：

//Method that sets current time and calls the handleSubmitfunction:

setTimeAndSubmit = () => {
let date = new Date().getDate(); //Current Date
let month = new Date().getMonth() + 1; //Current Month
let year = new Date().getFullYear(); //Current Year
let hours = new Date().getHours(); //Current Hours
let min = new Date().getMinutes(); //Current Minutes
let sec = new Date().getSeconds(); //Current Seconds

this.setState({
  //Setting the value of the date time
  date:
    date + '/' + month + '/' + year + ' ' + hours + ':' + min + ':' + sec,

  }, () => {
    //this will be executed when setState is done:
    this.handleSubmit();
});
}

我也将更新数据库调用和函数也更改为Franks建议：更新数据库调用：

if (this.state.pickerSelection === "WHATEVER") {
  updateDatabase(this.state.textInputField, this.state.date);
  Alert.alert("database updated!");

函数是：

const updateDatabase = (item, time) => {
 db.ref('/Database/...').push({
  Amount: item,
  time: time
 });
};

首次点击时，React Native数据不会.push

2 个答案: