React Native首次点击提交时Firebase未接收时间戳的问题

这个问题的核心有两个：setState是异步操作，以及你当前的时间计算逻辑是在组件加载时执行的，不是点击按钮时的实时时间。咱们一步步来修复：

问题根源拆解 #

1. setState异步特性：你在handleSubmit里调用this.setState后立刻去取this.state.date，这时候state还没完成更新，所以首次拿到的是初始值" "。
2. 时间计算时机错误：你在组件外部定义的date、month等变量，是组件加载时就计算好的固定值，不是点击按钮那一刻的实时时间。
3. 全局变量冗余：用currentTimeAndDate这个全局变量传递时间，既不符合React的状态管理逻辑，也容易导致数据不同步。

修复后的代码示例 #

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

// 把updateDatabase改成接收两个参数：内容和时间
const updateDatabase = (item, timestamp) => {
  db.ref('/Database/...').push({
    Amount: item,
    time: timestamp
  });
};

export default class AddItem extends Component {
  constructor(props) {
    super (props);
    this.state = {
      pickerSelection: "default value!",
      date: " ",
      textInputField: "" // 记得初始化输入框的state
    };
  }

  handleSubmit = () => {
    // 关键：在点击按钮时才计算实时时间
    const now = new Date();
    const currentTimeAndDate = `${now.getDate()}/${now.getMonth() + 1}/${now.getFullYear()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;

    // 更新state（如果需要在界面显示时间的话），直接用刚生成的时间调用updateDatabase
    this.setState({
      date: currentTimeAndDate
    });

    if (this.state.pickerSelection === "WHATEVER") {
      // 直接传递实时生成的时间，不用依赖异步更新的state
      updateDatabase(this.state.textInputField, currentTimeAndDate);
      Alert.alert("database updated!");
    }
  }

  render() {
    return (
      <View>
        {/* 修复onPress写法：合并两个执行函数 */}
        <TouchableHighlight onPress={() => {
          TextInput.CheckTextInputIsEmptyOrNot(); // 执行输入检查逻辑
          this.handleSubmit();
        }}>
          <Text style={styles.buttonText}>Update</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

关键优化点 #

• 实时计算时间：把时间生成逻辑放到handleSubmit内部，确保每次点击按钮时获取的都是当前最新的时间。
• 避免依赖异步的setState：直接使用刚生成的时间变量调用updateDatabase，不用等待state更新完成再取值。
• 移除全局变量：通过函数参数传递时间，让数据流更清晰，避免全局变量导致的不同步问题。
• 修复onPress写法：原来的TouchableHighlight不能直接绑定两个onPress函数，用箭头函数包裹合并执行逻辑。

这样修改后，首次点击按钮时，时间戳就会和输入内容一起正确推送到Firebase了。

内容的提问来源于stack exchange，提问作者Christian Ritter