反応を使ってMongoからのデータを表示することはできません

Question

この問題は誰でも助けてくれますか？私はReact on Meteorを実行しています。このコンポーネントを使用してTrackerReactを使用してMongoにデータを追加します。別のコンポーネントにこれらのデータを取り込み、ページロード後にconsole.logデータが残っているので、Mongoデータが読み込まれる前にページが読み込まれていると思います。ありがとうございました。 .jsxの私はモンゴに保存場所：私はそれらをロードしたいのはここ

import React from 'react'; 
import TrackerReact from 'meteor/ultimatejs:tracker-react' 

Gifts= new Mongo.Collection("gifts"); 

export default class AdminAdd extends TrackerReact(React.Component){ 
addGift(event){ 
    event.preventDefault(); 

    giftName=this.refs.giftname.value.trim(); 
    giftCity=this.refs.giftcity.value.trim(); 
    giftActive=this.refs.giftactive.checked; 

    Gifts.insert({ 
     name: giftName, 
     city: giftCity, 
     active: giftActive, 
    }); 

    this.refs.giftname.value=""; 
    this.refs.giftcity.value=""; 
    this.refs.giftactive.checked=false; 
} 

render(){..RenderStuff..} 

は次のとおりです。

import React from 'react'; 
import Gift from './components/Gift.jsx' 
export default class Main extends React.Component{ 
allgifts(){ 
    return Gifts.find().fetch(); 
} 
render(){ 
    console.log(allgifts()); 
    return(
     <div className="row"> 
     {this.allgifts().map((gift)=>{ 
      return 
       <Gift gift={gift} key={gift._id}/>})} 
     </div> 
    )}} 

とギフトコンポーネント：

import React from 'react'; 
export default class Gift extends React.Component{ 
render(){ 
    return(
     <div> 
      <div> 
       <div>{this.props.gift.name}</div> 
       <div>{this.props.gift.city}</div> 
       <div>{this.props.gift.active}</div> 
      </div> 
     </div> 
    )}} 

、これはその後、最初の戻り空のオブジェクトで、ときに私Gifts.find（）（フェッチ）それは手動それは後に動作コンソールログです：。

Answer 1

koolaangによると、Giftsコレクションが読み込まれる前にテンプレートが初めてレンダリングされる可能性があります。しかし、実際の問題は、コレクションがロードされたときに反応的に再レン​​ダリングされないことです。これは、お客様のMainコンポーネントをTrackerReactにラップしていないためです。

export default class Main extends TrackerReact(React.Component) { ... } 

今すぐコンポーネントがコレクションのロード後に再レンダリングする必要があります。だから、このようにそれを修正する必要があります。ローディング状態を実装する必要がある場合は、サブスクリプションの準備状況を確認できますが、必須ではありません。

Answer 2

バックエンドからフロントエンドまでのデータの転送に時間がかかるためです。 パブリッシュ/サブスクライブを使用している場合は、handle.readyを使用してデータがフロントエンドに到達するまで待機する必要があります。