Firebase条目创建2个ID

Question

我正在尝试使用firebase在数据库条目中添加标题和正文，但是我获得正文和标题的ID，而不是该票证的ID。

我确信我对snap的理解是错误的。我需要更改什么以使每个提交只为每个提交提交一个ID？

Ask.js：

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

// CSS
import '../../assets/css/App.css';

class Ask extends Component {
  constructor(props){
    super(props);
    this.addTicket = this.addTicket.bind(this);
    this.database = fire.database().ref().child('tickets');
    // We're going to setup the React state of our component
    this.state = {
      tickets: [],
    }
  }

  componentWillMount(){
    const previousTickets = this.state.tickets;
    // DataSnapshot
    this.database.on('child_added', snap => {
      previousTickets.push({
        id: snap.key,
        ticketTitle: snap.val().ticketTitle,
        ticketBody: snap.val().ticketBody,
      })

      this.setState({
        tickets: previousTickets
      })
    })

  }

  addTicket(title, body){
    this.database.push().set({ ticketTitle: title });
    this.database.push().set({ ticketBody: body });
    alert("Your question has been submitted.")
    this.props.history.push('/pending')
  }

  render() {
    return (
      <div>
        <div className="m-container">
          <h1>Ask a Question:</h1>
          <hr/>
          <p>
            Type your tech question below to the best of your ability and our network of qualified technicians will look over your question.
            When a technician feels confident enough to give it a shot, you will be matched with technician and will be able to send messages, call, or schedule an in-person visit.
            If the technician cannot arrive at a solution, you will not be charged by that technician and the question will be passed to another qualified technician.
            Once a technician successfully answers your question, you will be prompted with feedback, payment, and an optional tip.
            <br/><br/>
            Keep in mind, your open questions will be under the <Link to="/pending/">Pending tab</Link>!
            </p>
        </div>
        <div>
          <TicketForm addTicket={this.addTicket} />
        </div>
      </div>
    );
  }
}

export default withRouter(Ask);

TicketForm.js：

import React, { Component } from 'react';

// CSS
import '../assets/css/App.css';

class TicketForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            ticketBody: '',
        };
        this.handleBodyInput = this.handleBodyInput.bind(this);
        this.handleTitleInput = this.handleTitleInput.bind(this);
        this.writeTicket = this.writeTicket.bind(this);
    }

    // When the user input changes, set the handleTitleInput
    // to the value of what's in the input box.
    handleTitleInput(e){
        this.setState({
            ticketTitle: e.target.value, // Value of the users text input
        })
    }

    handleBodyInput(e){
        this.setState({
            ticketBody: e.target.value, // Value of the users text input
        })
    }



    writeTicket(){
        // 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">
                <label for="title">Title: </label>
                <input
                 id="title"
                 type="text"
                 placeholder="Short title briefly describing issue in a sentence" 
                 value={this.state.ticketTitle}
                 onChange={this.handleTitleInput}
                /> 
                <br/>
                <br/>
                <label for="body">Description: </label>
                <textarea
                 id="body"
                 placeholder="Tell us about your problem in your words to the best of your ability. We can iron out the details later if you are not so sure yet." 
                 value={this.state.ticketBody}
                 onChange={this.handleBodyInput}
                /> &nbsp;
                <button 
                className="m-btn"
                onClick={this.writeTicket}>
                Submit
                </button>
            </div>
        )
    }
}

export default TicketForm;