Meteor React - 点击按钮可以重新订阅另一个订阅答案

【问题标题】：Meteor React - can re-subscribe to another subscription on button clickMeteor React - 点击按钮可以重新订阅另一个订阅
【发布时间】：2018-05-12 23:18:24
【问题描述】：

我在开始时使用 withTracker 订阅数据

export default withTracker(({ params }) => {
    const dataHandle = Meteor.subscribe('publishData');
    const loadingData = !dataHandle.ready();

    return {
        loadingData,
        dataHandle,
        data: Data.find({}).fetch(),
    }    
})(ShowData);

我想要实现的是能够在单击按钮时重新订阅不同的出版物。我传递了一个过滤数据的参数对象。

所以我有一个带有onClick={this.applyFilters.bind(this, filters)}的按钮

applyFilters(filters) {

    this.props.dataHandle = Meteor.subscribe('publishFilteredData', filters);

}

但什么也没发生。它不会重新订阅任何内容。当我在新订阅之前执行dataHandle.stop() 时，它会重新订阅一开始初始化的publishData。

【问题讨论】：

标签： javascript meteor

【解决方案1】：

您需要根据您的条件applyFilters 在withTrackerfunction 中处理您的订阅。但是，这里的重点是您需要将该条件保持在一个状态并在withTracker函数中访问它。在这个Meteor Forum thread 中讨论了这个问题。虽然可以在withTracker 中设置/获取 React 状态，但更好的做法是将组件分成两部分，其中一个保存状态并处理事件，另一个（无状态的）用于显示结果，仅用于馈送到withTracker 函数。你也可以参考这个 Stackoverflow question。因此，您的代码或多或少类似于下面的代码。

另一方面，在订阅之间进行更改时，两个订阅都会在短时间内加载到Meteor。你可以找到更多关于它的信息here。因此，如果您的目标只是直观地过滤数据而不是某些隐私需求等，我建议订阅用户可用的所有数据并通过Minimongo 上的客户端查询过滤数据。

export default class ShowData extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            applyFilters: false,
        };
    }
    handleApplyFilters= () => {
        this.setState({
            applyFilters: !this.state.applyFilters,
        });
    };

    render () {
        return (
            <Container
                applyFilters={this.state.applyFilters}
                handleApplyFilters={this.handleApplyFilters}
            />
        );
    }
}

// Child component, renders only
const StatelessComponent = ({ handleApplyFilters }) => {
   return(
     <div>
      // Display your data
        <button onClick={handleApplyFilters}>Filter</button>
     </div>
   );

};

// Do all your reactive data access in this method.
// Note that this subscription will get cleaned up
// When your component is unmounted
const Container = withTracker((props) => {
    const filters = ''; // define your filters here
    let dataHandle; 
    if (props.applyFilter) {
      dataHandle = Meteor.subscribe('publishFilteredData', filters);
    } else {
      dataHandle = Meteor.subscribe('publishData');
    }
    const loadingData = !dataHandle.ready();
    return {
        loadingData,
        dataHandle,
        data: Data.find({}).fetch(),
    }    
})(StatelessComponent);

【讨论】：