javascript - Meteor React - 单击按钮可以重新订阅另一个订阅

Question

我一开始使用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 。

Answer 1

您需要根据您的条件applyFilters在withTracker函数中处理您的订阅。然而，这里的要点是，您需要将该条件保持在某种状态并在 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);