React Firebase 时间戳使用

Question

因此，我试图获取发布帖子时间的时间戳，但 fire.database.ServerValue.TIMESTAMP 似乎在 addTicket 函数中不起作用。当我发布票证时，它不会加载到Pending 页面，并且在Ask URL 中只有变量ticketTitle 和ticketBody。我想我只是对时间戳在 firebase 中的工作方式感到困惑。如何将帖子的时间戳正确添加到数据库元组？

Ask.js：

import React, { Component } from 'react';
import AskForm from '../../components/AskForm.js';
import fire from '../../config/Fire.js';
import { Link, withRouter } from 'react-router-dom'

class Ask extends Component {
  constructor(props){
    super(props);
    this.addTicket = this.addTicket.bind(this);
    this.database = fire.database().ref().child('tickets');

    this.state = {
      tickets: [],
      userId: this.props.user.uid
    }
  }

  componentDidMount(){
    fire.database().ref('/users/' + this.props.user.uid).once('value').then(function(snapshot) {
      var FirstName = (snapshot.val() && snapshot.val().userFirstName);
      // ...
      console.log(FirstName);
    }); 
  }

  addTicket(title, body){
    this.database.push().set({ ticketUserId: this.props.user.uid, ticketTitle: title, ticketBody: body, ticketStatus: 'pending', ticketTime: fire.database.ServerValue.TIMESTAMP});
    alert("Your question has been submitted.")
    this.props.history.push('/pending')
  }

  render() {
    return (
      <div>
        <div className="m-container">
        </div>
        <div>
          <AskForm addTicket={this.addTicket} />
        </div>
      </div>
    );
  }
}

export default withRouter(Ask);

AskForm.js

import React, { Component } from 'react';

class AskForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            ticketBody: '',
            ticketTitle: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.writeTicket = this.writeTicket.bind(this);
    }

    // When the user input changes, set the ticketTitle or ticketBody
    // to the value of what's in the input box.

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    writeTicket(){
        if(this.state.ticketTitle === '' || this.state.ticketBody === ''){
            alert('Please complete all fields.')
        } else {
            // Call a method that sets the ticketTitle and ticketBody for a ticket to
            // the value of the input
            this.props.addTicket(this.state.ticketTitle, this.state.ticketBody);
            // Set inputs back to an empty string
            this.setState({
                ticketBody: '',
                ticketTitle: ''
            })
        }

    }

    render(){
        return(
            <div class="s-container">
                <form>
                    <label for="ticketTitle">Title: </label>
                    <input
                    id="ticketTitle"
                    name="ticketTitle"
                    type="text"
                    placeholder="A short sentence to identify your issue" 
                    value={this.state.ticketTitle}
                    onChange={this.handleChange}
                    /> 
                    <br/>
                    <br/>
                    <label for="ticketBody">Description: </label>
                    <textarea
                    id="ticketBody"
                    name="ticketBody"
                    placeholder="Placeholder" 
                    value={this.state.ticketBody}
                    onChange={this.handleChange}
                    /> &nbsp;
                    <button 
                    className="m-btn"
                    onClick={this.writeTicket}>
                    Submit
                    </button>
                </form>
            </div>
        )
    }
}

export default AskForm;

Answer 1

重温了我的问题：

我需要直接使用 import * as firebase from 'firebase'; 而不是从我的配置文件导入 firebase。然后只需将时间值与我的其他值一起推送到数据库。例如，请参见下文。

代码：

import * as firebase from 'firebase';

  addMessage(body){
    this.questionDatabase.child(this.state.questionId).child('messages').push().set({ 
        messageUserId: fire.auth().currentUser.uid, 
        messageBody: body,
        time: firebase.database.ServerValue.TIMESTAMP
    });
  }

Answer 2

这可以创建时间戳客户端正在使用firestore：（在这种情况下，我从我的主firebase.js文件中导出它）

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

export const serverStamp = firebase.firestore.Timestamp

导入serverStamp后使用：

var stampNow = serverStamp.now()