React Firebase时间戳用法 [英] React Firebase Timestamp Usage

问题描述

因此，我尝试获取发布时间的时间戳，但是 fire.database.ServerValue.TIMESTAMP 在 addTicket 功能.当我发布票证时，它不会加载到 Pending 页面，而只有变量 ticketTitle & Ask URL中的 ticketBody .我想我只是对时间戳在Firebase中的工作方式感到困惑.如何将帖子的时间戳正确添加到数据库元组?

So I am trying to get a timestamp on the time a post is made, but fire.database.ServerValue.TIMESTAMP doesn't seem to be working in the addTicket function. When I post the ticket, it doesn't load to the Pending page, and just has variables ticketTitle & ticketBody in the Ask URL. I think I am just confused on how the timestamp works in firebase. How do I properly add the timestamp of the post to the database tuple?

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;

推荐答案

重新讨论了我的问题:

我需要直接使用 import *作为firebase从'firebase'; 而不是从我的配置文件中导入firebase.然后，只需将时间值和其他值一起推入数据库即可.例如，请参见下面.

I need to import firebase directly using import * as firebase from 'firebase'; instead of from my config file. Then just pushed the time value to the database with my other values. See below for example.

代码:

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

这篇关于React Firebase时间戳用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！