Meteor React - можете повторно подписаться на другую подписку по нажатию кнопки - PullRequest
Новая
       4

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

0 голосов
/ 12 мая 2018

Вначале я подписываюсь на данные, используя 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, инициализированный в начале.

1 Ответ

0 голосов
/ 12 мая 2018

Вы должны обрабатывать свои подписки в функции withTracker в зависимости от вашего состояния applyFilters. Однако суть в том, что вам нужно поддерживать это состояние в состоянии и обращаться к нему с помощью функции withTracker. В этой ветке Meteor Forum обсуждается этот вопрос. Хотя можно установить / получить состояние 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);
...