第一次渲染后反应组件丢失道具

Question

在这个组件中，我使用 createContainer 来访问集合并调用会话变量，以便使用 findOne 查询集合。当我第一次渲染组件时，一切正常并且集合被正确查询。但是在 console.log 方法中。我将在渲染上显示准确的信息，然后立即未定义相同的变量。

我添加了 setState 作为尝试在组件中保存状态的一种方式，但 props 仍然退出（在第一次渲染后几乎立即未定义），我不知道为什么？

import React from 'react';
import { Email } from 'meteor/email';
import { createContainer } from 'meteor/react-meteor-data';

import {Tickets} from './tickets';

class ClaimButton extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      senderEmail: '',
      senderPhone: '',
      senderMessage: '',
      error: '',
      person: '',
      city: '',
      quantity: '',
      ticketNum: '',
      orderSum: ''
    }
    this.onClaimRequest = this.onClaimRequest.bind(this);
  }

  onClaimRequest(e) {
    e.preventDefault();
    const {ticket} = this.props
    const claimTicketData = { person, city, quantity, ticketNum, orderSum };
    this.setState(claimTicketData);
    const {tikDta} = this.state;
    console.log(tikDta);
    let receiver = Meteor.settings.public.RECEIVER;
    Meteor.call('sendEmail',
      receiver,
      this.refs.senderEmail.value,
      'An event was claimed.',
      `Dear coordinator, A user claiming to be: ${tikDta.person} has initiated a claim in ${tikDta.city}, of ${tikDta.quantity}, at ${tikDta.ticketNum} ticket(s).  A total of ${tikDta.orderSum}.  During this version, please contact them directly to confirm their claim.
      Email: ${ this.refs.senderEmail.value}
      Phone:  ${this.refs.senderPhone.value}.
      Sender Message: ${ this.refs.senderMessage.value }
      Ticket Id Number: ${this.props.ticket._id}`
    );
}

  render() {
    console.log('claimButton', this.props.ticket);
    return (
      <div>
        <h1 className="form-title">Claiming Ticket?</h1>
        <h2>Are you {this.props.ticket.person}?  Ready to claim {this.props.ticket.orderSum} in {this.props.ticket.city}? </h2>
        <h2>Quantity: {this.props.ticket.quantity}</h2>

        <form onSubmit={this.onClaimRequest}>
          <div className="form-group">
            <label htmlFor="senderEmail">Email address</label>
            <input type="email" ref="senderEmail" className="form-control" id="senderEmail1" placeholder="Email" />
          </div>
          <div className="form-group">
            <label htmlFor="SenderPhone">Contact telephone</label>
            <input type="tel" ref="senderPhone" className="form-control" id="SenderPhone1"/>
          </div>
          <div className="form-group">
            <label htmlFor="SenderMessage">Messsage us</label>
            <textarea ref="senderMessage" className="form-control" rows="3"></textarea>
          </div>
          <div>
            <button className="btn btn-default" type="submit">Claim</button>
          </div>
        </form>
      </div>
    )
  }
}


export default createContainer(() => {
  const claimedTicket = Session.get('claimedTicket');
  Meteor.subscribe('tickets.claimed');
  const ticket = Tickets.findOne(claimedTicket);
  // console.log(ticket);
  return {ticket}
}, ClaimButton);

Answer 1

很可能是父组件中的问题。在 React 中，每当父级的状态发生变化时，所有的子级都会重新渲染。第一次调用ClaimButton 的render()，它有正确的道具。但是，父类中发生了一些事情——父类的状态发生了变化，或者祖先链上的某个组件发生了状态变化——这导致该组件的道具发生变化并触发重新渲染。我会在父母中开始你的调试工作，因为那是道具的来源。