2

コレクション名を小道具として渡すことで、サーバー上のデータをサブスクライブする React コンポーネントを作成しようとしています。コレクション名は動的に変更される可能性があるため、パブリケーションおよびサーバー コレクション変数を作成するメソッドを呼び出しています。ここでの理論は、親コンポーネントでデータ パブリケーション、サーバーおよびクライアントの mongo コレクション変数を構築し、子コンポーネントでこのパブリケーションをサブスクライブすることです。親コンポーネントは次のように設定されます。

    export default class TilesSingle extends TrackerReact(Component) {
      newDataCollection(){
        Meteor.call("setupData","randomcollectionname");
        if(!window["randomcollectionname"]){
          window["randomcollectionname"] = new Meteor.Collection("randomcollectionname");
        }
      }
      render(){
        this.newDataCollection();
        return(
          <div>
            <DataObject />
          </div>
        )
      }
    }

setupData メソッドは次のようになります。

Meteor.methods({
    setupData(collectionname){
      if(!global[collectionname]){
        global[collectionname] = new Meteor.Collection(collectionname);
        Meteor.publish("pub."+ collectionname,function() {
          return global[collectionname].find();
        });
      }
    }
})

子 DataObject コンポーネントは次のようになります。

    export default class DataObject extends TrackerReact(Component) {
      constructor(){
        super();
        this.state = {
          subscription: {
            tiledata: Meteor.subscribe("pub.randomcollectionname"),
          }
        }
      }
      componentWillUnmount(){
        this.state.subscription.tiledata.stop();
      }
      findData(){
        post = window['randomcollectionname'].findOne();
        console.log(post)
        return post;
      }
      render(){
        obj = this.findData();
        if(!obj){
          obj = {};
          obj["score"] = 0;
        }
        return(
          <div>
            <h4>{obj.score}</h4>
          </div>
        )
      }
    }

findData() 関数で投稿を記録していることに注意してください。更新すると、コンソールに次のように記録されます。

undefined
undefined
> Object {..}
> Object {..}
undefined
undefined

サブスクリプションが機能し、その後機能しなくなったかのようです。反応がこれらのコンポーネントをレンダリングする順序と関係があり、クライアントが子コンポーネントをレンダリングしようとするまでにメソッドがサーバー上で終了していないと考えています。何か案は?

4

0 に答える 0