は、文書のリストをレンダリングするために流星

Question

と反応し、私はサブスクリプションからの配列を返す関数で.map()を使用して単一の文書をレンダリング：

export default class ApplicationForm extends TrackerReact(React.Component) { 

    constructor() { 
    super(); 
    this.state = { 
     subscription: { 
      applications: Meteor.subscribe('applications') 
     } 
    } 
    } 

    componentWillUnmount() { 
    this.state.subscription.applications.stop(); 
    } 

    getSingleApplication() { 

    const applicationDoc = Applications.find().fetch(); 

    if (applicationDoc) { 
     return applicationDoc[0]; 
    } 
    } 

    render() { 

    const name = this.getSingleApplication().name; 

    return (
     <div> 
      {name} 
     </div> 
    ); 
    } 
} 

私は次のエラーを取得する：

Cannot read property 'name' of undefined

私は私が持っていると思いますいくつかの基本的なjavascriptで欠けていた。

または、ページの読み込み時にサブスクリプションが準備されていないとどうしてですか？

Answer 1

、あなたが単一のドキュメントを検索したいとき.findOne()を使用しています。これにより、カーソルの代わりにオブジェクトが返されるので、.fetch()または.map()は不要です。

getSingleApplication() { 
    return Applications.findOne(); 
} 

次に、あなたは何も（サブスクリプションは、例えば準備ができていない場合に発生することができた）見つからない場合には防御的にコーディングする必要があります。

render() { 

    const app = this.getSingleApplication(); 
    const name = app && app.name; 

    if (name) { // assuming you don't want to render anything if there is no name 
    return (
     <div> 
     {app.name} 
     </div> 
    ); 
    } 
} 

Answer 2

免責事項：私は流星を一度も使用していませんが、これはテストされていません。

サブスクリプションに反応するための準備が整っている必要があります。サブスクリプション時にコールバック関数を渡すことで正しくドキュメントを理解していれば、これを行うことができます。

だから、

constructor() { 
    super(); 
    this.state = { 
     ready: false, 
     subscription: { 
      applications: Meteor.subscribe('applications',() => this.setState({ready: true}) 
     } 
    } 
    } 

とレンダリングに必要です：

まず

render() { 
    if (!this.state.ready) return null; 
    const name = this.getSingleApplication().name; 

    return (
     <div> 
      {name} 
     </div> 
    ); 
    }