ユーザー文書からのメッセージのリストのレンダリング

Question

私は単に、Meteor.usersコレクションのユーザー文書上のメッセージのリストをレンダリングしようとしています。 guideに示しているものに従い

は、私は次のことを試してみました：

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); 

注意してください、予想通りブラウザコンソールでMeteor.user()は、ユーザーオブジェクトを印刷し呼び出します。上記のコードでは、this.props.usr（ちょうどMeteor.user()）は定義されていません。

私はuser.profileという文書のsiteMessagesというフィールドにメッセージの配列が含まれており、それらを<ul>にレンダリングする必要があります。

なぜMeteor.user()はコードでは未定義ですが、ブラウザコンソールから呼び出された場合に正しく返されますか？

Answer 1

Meteor.user()はすぐには入手できません（技術的な詳細はわかりません）が、Meteor.userId()です。 Meteor.user()が反応するので、ユーザーデータが存在するときにコンテナが再実行/再レンダリングされます。あなたのrenderを次のように変更しています：

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> 
    ); 
}