React Firebase时间戳用法

时间:2018-09-23 01:34:54

标签: javascript reactjs firebase firebase-realtime-database timestamp

因此,我尝试获取发帖时间的时间戳,但是fire.database.ServerValue.TIMESTAMPaddTicket函数中似乎没有作用。当我发布故障单时,它不会加载到Pending页面上,而在ticketTitle URL中只有变量ticketBodyAsk。我想我只是对时间戳在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;

1 个答案:

答案 0 :(得分: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
    });
  }