如何检查反应组件中的 subscription.ready()？

Question

这是一个非常基本的示例，我如何从 mongoDB 获取数据到我的 meteor/react 应用程序。

现在我想在加载数据时显示加载图标。因此我需要使用类似 subscription.ready() 的东西，但我应该把它放在哪里？

import { Meteor } from 'meteor/meteor'
import { createContainer } from 'meteor/react-meteor-data'

import Example from '../components/example.jsx'
import ExampleCollection from '/imports/api/collection.js'

export default createContainer((props) => {
    const   id = props.params.id,
            subscription = Meteor.subscribe('anything', id)
            data = ExampleCollection.find({ parent: id }).fetch()

    return { data: data }
}, Example)

Answer 1

我是这样做的：

    render() {
        if (this.props.isLoading) {
            return null; // or show loading icon
        }

        return (
            // stuff
        );
    }


export default createContainer((props) => {
    const   id = props.params.id;
    let subscription = Meteor.subscribe('anything', id);
    let data = ExampleCollection.find({ parent: id }).fetch();
    let isLoading = !subscription.ready();

    return {data, isLoading};
}, Example);

Answer 2

对于那些可能仍在寻找此类功能的人，我认为这可能是更好的方法。另请注意，目前 createContainer 已弃用并更改为 withTracker。

export default withTracker((props) => {
    let isLoading = true;
    let data = [];

    const id = props.params.id;
    const subscription = Meteor.subscribe('anything', id);
    if (subscription.ready()) {
        isLoading = false;
        data = ExampleCollection.find({ parent: id }).fetch();
    }

    return {data, isLoading};
}, Example);

这是 Zim 的回答，稍作重构。

如何检查反应组件中的 subscription.ready()？

How to check for subscription.ready() in a react component?

javascript

reactjs

meteor

subscription