Wie kann ich eine React Prop zu einem Kind mit "this.props ..." als Mongo-Sammlung .findOne() Abfrage verwenden?

Question

Ich habe den folgenden Code, der funktioniert. Innerhalb meiner Rendermethoden kann ich this.props.ticket._id verwenden und die ID des Tickets erhalten. Aber außerhalb der Render-Methode wird this.props.ticket._id undefiniert. Was kann ich also tun, um diese Requisite als Abfrage in meiner Mongo-Sammlung am unteren Rand zu übergeben?

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

import { UserReservations } from '../../../imports/collections/userRes'; 

class PurchaseView extends React.Component { 

    renderReservationInfo() { 
    console.log(this.props.UserReservation); 

    render() { 
    console.log(this.props.ticket._id); 
    console.log(currentTicketId); 
    return(
     <div> 
      <div> 

      {this.renderReservationInfo()} 

      </div> 
     </div> 
    ) 
    } 
} 

Okay, so hier unten im Inneren des UserReservations.findOne (ticketId: this.props.ticket._id) ... this.props.ticket._id nicht funktioniert. Irgendwelche Vorschläge dazu, was ich tun kann, um den Prop-Wert zu erhalten, um ihn als Abfrage zu verwenden?

export default createContainer(() => { 
    Meteor.subscribe('userReservations'); 

    return { UserReservation: UserReservations.findOne({ ticketId: this.props.ticket._id }).fetch() }; 

    }, PurchaseView); 

Answer 1

Erstellen Sie Container ist ein Wrapper um Ihre Komponente. Also sollten Sie die Requisiten in createContainer akzeptieren und diese Requisiten werden dann an die Komponente weitergegeben. Sie sollten auch Daten in den Publikationen filtern, ansonsten werden Sie, wenn Sie in Ihrem Code möchten, alle Daten auf dem Client veröffentlichen.

So etwas sollte funktionieren, aber Sie müssen Ihre Publikation ändern, um die ID zu akzeptieren.

export default createContainer(({ ticket }) => { 
    Meteor.subscribe('userReservations', ticket._id); 

    return { UserReservation: UserReservations.findOne().fetch() }; 

}, PurchaseView);