Rendering-Liste der Nachrichten aus Benutzerdokument

Question

Ich versuche einfach, die Liste der Nachrichten in einem Benutzerdokument aus der Meteor.users Sammlung zu rendern.

In Übereinstimmung mit dem, was in den guide gezeigt hat, habe ich versucht, die folgenden:

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

class Messages extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      messages: [], 
     } 
    } 

    renderMessages() { 
     console.log('usr: ' + this.props.usr) //<- undefined 

     //so this wont work 
     let msgs = this.props.profile.siteMessages.map((obj) => { 
      return (
       <li key={obj.toString()}> 
        <div>a message </div> 
       </li> 
      ); 
     }) 

     return msgs; 
    } 

    render() { 
     return (
      <div className="messages"> 
       <ul className="messages-list"> 
        {this.renderMessages()} 
       </ul> 
      </div> 
     ); 
    } 
} 

Messages.propTypes = { 
    usr: PropTypes.object.isRequired, 
}; 

export default createContainer(() => { 

    return { 
    usr: Meteor.user(), 
    }; 
}, Messages); 

Bitte beachten Sie, wie erwartet Meteor.user() in der Browser-Konsole druckt das Benutzerobjekt aufrufen. Im obigen Code ist this.props.usr (sowie nur Meteor.user()) nicht definiert.

Ich habe ein Feld auf der user.profile Dokument namens siteMessages, die einfach eine Reihe von Nachrichten enthält, und ich muss sie auf die <ul> rendern.

Warum ist Meteor.user() im Code nicht definiert, wird jedoch korrekt zurückgegeben, wenn von der Browserkonsole aus aufgerufen?

Answer 1

Meteor.user() ist nicht sofort verfügbar (ich bin nicht sicher, auf die technischen Details davon), obwohl Meteor.userId() ist. Meteor.user() ist reaktiv, daher wird Ihr Container erneut ausgeführt bzw. neu gerendert, wenn die Benutzerdaten vorhanden sind. Ich würde nur Ihre render zu ändern:

render() { 
    if (!this.props.usr) return null; // or a spinner, if you want 

    return (
     <div className="messages"> 
      <ul className="messages-list"> 
       {this.renderMessages()} 
      </ul> 
     </div> 
    ); 
}