Meteor React — можно повторно подписаться на другую подписку по нажатию кнопки

Я подписываюсь на данные в начале, используя 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
person Art    schedule 11.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно обрабатывать свои подписки в withTrackerфункции в зависимости от вашего состояния applyFilters. Однако дело здесь в том, что вам нужно сохранить это условие в состоянии и получить к нему доступ в функции withTracker. В этой ветке форума Meteor этот вопрос обсуждается. Хотя можно установить/получить состояние React в withTracker, лучше всего разделить компонент на два, один из которых содержит состояние и обрабатывает события, а другой (без сохранения состояния) предназначен только для отображения результатов и для подачи на функция withTracker. Вы также можете обратиться к этому вопросу Stackoverflow < /а>. Таким образом, ваш код будет более или менее похож на приведенный ниже.

С другой стороны, при переключении между подписками есть короткий период, когда обе подписки загружаются в Meteor. Подробнее об этом можно узнать здесь. Итак, если ваша цель состоит только в визуальной фильтрации данных, а не в каких-либо требованиях к конфиденциальности и т. Д., Я рекомендую подписаться на все данные, доступные пользователю, и фильтровать данные с помощью запросов на стороне клиента на 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);
person Gokhan Karadag    schedule 12.05.2018