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