Метеорологическая подписка в React с использованием пропущенных ошибок при обновлении страницы

Question

Я использую React с Meteor. В моем компоненте верхнего уровня у меня есть мои основные подписки:

export default withTracker(() => {
    let groupsSub = Meteor.subscribe('groups');
    let eventsSub = Meteor.subscribe('events');
    let userSub = Meteor.subscribe('currentUser');
    return {
        groups: Groups.find({}).fetch(),
        events: Events.find({}).fetch(),
        user: Meteor.user() || false,
    };
})(App);

Данные подписки передаются как реквизиты дочернему компоненту, который находится на новой странице (используя React Router 4).

Это работает до сих пор. На дочерней странице мне также нужно получить идентификатор от реквизита и использовать его как часть дополнительной подписки CommentsApiSub:

export default withTracker(props => {
    const attachedTo = props.group[0]._id;
    let CommentsApiSub = Meteor.subscribe('comments', { attachedTo });
    return {
        comments: CommentsApi.find({}).fetch(),
    };
})(Child);

И это публикация CommentsApi:

Meteor.publish('comments', function({ attachedTo }) {
    console.log(attachedTo);
    return CommentsApi.find(
        { attachedTo },
        { fields: { date: 1, body: 1, user: 1 } },
    );
});

Если я перехожу на страницу, она работает нормально, но если я обновляю страницу, я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property '_id' of undefined

Я знаю, что это потому, что props.group не загружен, но я не уверен, как отложить вызов моей подписки на комментарии?

Answer 1

Вы должны проверить, готова ли подписка Meteor, прежде чем пытаться загрузить ваши компоненты. Meteor.subscribe () возвращает дескриптор подписки, который содержит реактивный источник данных, называемый ready (). Как пример, используя ваш код;

export default withTracker(() => {
    const groupsSub = Meteor.subscribe('groups');
    // Remaining of the code here 
    return {
        loading: !groupsSub.ready()
        groups: Groups.find({}).fetch(),
        // Other props 
    };
})(App);

И в вашем методе render() вы можете использовать этот загрузочный объект, чтобы проверить, готова ли подписка;

render () {
        const { loading } = this.props;
        if (loading) {
            return (
                <h2>Loading Page ...</h2>
            );
        }
       // Remaining of the code
}

Вы можете обратиться к официальной документации Метеор здесь.