订阅准备好后 Meteor React 渲染两次

Question

我使用 Meteor 和 react 和 FlowRouter 来处理订阅。我发现当我的组件渲染时，它会在几秒钟后渲染两次，但只有当我订阅了流星混合时。

例如：

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);

            ........

        }

相同的信息显示两次。这是由于 FlowRouter 使用的快速渲染，还是我做错了什么？

Answer 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(),
    }
}

如果 subs 已经准备好了，它不应该触发它们。

请注意，不能将空数组传递给 _.all，因为：

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

这就是为什么我在数组中添加了一个空对象，这样你就可以检查准备好的成员..

Answer 2

我建议在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();
    });
}

如果仍然渲染两次，我建议尝试为路由打开快速渲染并检查是否仍然出现此问题。