2

我使用 Meteor 和 react 和 FlowRouter 来处理订阅。我发现当我的组件渲染时，它会在几秒钟后渲染两次，但只有当我订阅了流星 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);

            ........

        }

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

4

2 回答 2

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 回答
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();
    });
}

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

于 2015-09-22T06:39:18.217 回答