2

React と FlowRouter で Meteor を使用してサブスクリプションを処理しています。コンポーネントがレンダリングされると、数秒後に 2 回レンダリングされることがわかりましたが、それは meteor mixin をサブスクリプションに登録している場合のみです。

例えば：

this.data を記録しました

PeoplePage = React.createClass({
    displayName:"People",
    mixins: [ReactMeteorData],
    getMeteorData() {
        const subHandles = [
            Meteor.subscribe("allPeople"),
        ];

        const subsReady = _.all(subHandles, function (handle) {
            return handle.ready();
        });

        return {
            subsReady: subsReady,
            people: People.find({}).fetch(),
        };
    },
    render(){
        if(this.data.subsReady == false){
            return (<Loading/>);
        } else {
            console.log(this.data);

            ........

        }

同じ情報が 2 回表示されます。これは FlowRouter が使用する高速レンダリングによるものですか、それとも私のやり方が間違っているのでしょうか?

4

2 に答える 2

1

関数内でサブスクリプションを行うことをお勧めしcomponentWillMount()ます。このようにして、最初の render() の前に一度だけサブスクライブするようにします。

getMeteorData() {
    var ready = _.all(this.subHandles, function (handle) {
        return handle.ready();
    });

    return {
        subsReady: ready,
        people: People.find({}).fetch()
    }            
},
componentWillMount() {
    this.subHandles = [];
    this.subHandles.push(Meteor.subscribe('allPeople');
},
componentWillUnmount() {
    this.subHandles.map(function(handle) {
        handle.stop();
    });
}

それでも 2 回レンダリングされる場合は、ルートの高速レンダリングを有効にして、この問題が引き続き発生するかどうかを確認することをお勧めします。

于 2015-09-22T06:39:18.217 に答える
1

うーん、問題は、コンポーネントが再レンダリングされるたびにサブスクリプションをトリガーしていることだと思います..試したことはありませんが、これで問題が解決するかどうかを確認できます

getMeteorData() {
    const subsReady = _.all(this.subs || [{}], function (handle) {
        if (typeof handle.ready == 'function') 
            return handle.ready();

        return false;
    });

    if (!subsReady) // you can extend it, to provide params to subscriptions
        this.subs = [
           Meteor.subscribe("allPeople")
        ];

    return {
        subsReady: subsReady,
        people: People.find({}).fetch(),
    }
}

潜水艦がすでに準備ができている場合は、潜水艦をトリガーするべきではありません。

次の理由により、空の配列を _.all に渡してはならないことに注意してください。

_.all([], function(a) {return a.b()}) // true

これが、空のオブジェクトを配列に追加した理由です。このようにして、準備ができているメンバーを確認できます..

于 2015-09-20T15:57:28.630 に答える