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（）返回订阅句柄，其中包含名为 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。

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

1 个答案: