React Native 数据在第一次点击时不会 .push 到 firebase

Question

我正在尝试将 TextInput 字段中的数据和创建的时间戳都推送到 Firebase 实时数据库。但是，当应用程序加载时，第一次点击提交只提交文本输入而不是“时间戳”

这是一个简单版本的文件，

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
 });
};