如果页面刷新，React 中的 Meteor 订阅使用传递的 prop 错误

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）。

到目前为止，这是有效的。在子页面上，我还需要从道具中获取一个 ID，并将其用作名为 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() returns 一个 订阅句柄 ，其中包含一个名为 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() 方法中，您可以使用 loading 属性来检查订阅是否准备就绪；

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

可以参考Meteor官方文档here。

如果页面刷新，React 中的 Meteor 订阅使用传递的 prop 错误

Meteor subscription in React using a passed prop errors if page is refreshed

meteor-react