Question

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

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

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＆＃39; render()时，它有正确的道具。然而，父类中正在发生一些事情 - 父母的状态发生了变化，或者祖先链上的一些组件发生了状态变化 - 导致这个组件的道具改变并触发了一个-render。我在父母那里开始你的调试工作，因为道具来自哪里。

首次渲染后，React Component丢失道具

1 个答案: