다른 구성 요소를 호출 한 후 구성 요소에 상태를 유지하는 방법

Question

내 검색 기능에 두 개의 구성 요소가 있는데, 하나는 검색 필터를 선택하고 다른 하나는 검색 쿼리를 수행하는 것입니다. 필터를 선택할 때마다 상태가 다시로드되므로 둘 이상의 필터를 선택할 수 없습니다. 검색 구성 요소를 호출하고 내 searchfilter 구성 요소의 상태를 유지할 수있는 방법이 있습니까? 내 searchfilters 구성 요소에서

나는이있다 :

<SearchFilters searchWithFilters={this.searchWithFilters.bind(this)} /> 

그리고 나는이 방법이 있습니다 : 내 검색 구성 요소에서

let state = _.extend({}, this.state); 
state.filters = this.toggleFilter(filterObj, state.filters); 
this.setState(state); 
this.props.searchWithFilters(state.filters); 

을 내가 가진

searchWithFilters(filters) { 
let state = _.extend({}, this.state); 
state.filters = filters; 
this.setState(state); 
this.props.search(this.state); 
} 

Answer 1

너무 SearchFilters의 상태를 사용하는 대신 필터를 저장하기 SearchComponent의 상태를 사용할 수 있습니다. toggleFilter 방법도 SearchComponent에 있으며 소품으로도 보내야합니다 (또는 항상 두 가지를 함께 사용하는 경우 searchWithFilters에서 수행 할 수 있습니다). 마지막으로 필터를 속성으로 SearchFilters 구성 요소에 보내야합니다.

<SearchFilters filters={this.state.filters} 
searchWithFilters={this.searchWithFilters.bind(this)} /> 

그런 searchWithFilters 만 새 필터를 수신하고 SearchComponent의 상태로 추가합니다. 다음과 같은 형식이 될 수 있습니다.

searchWithFilters(filterObj) { 
    let state = _.extend({}, this.state); 
    state.filters = []; 
    state.filters.push(this.state.filters); 
    state.filters.push(filterObj); 
    this.setState(state); 
    this.props.search(this.state); 
} 

당신은 또한 이것을 좋은 선택 일 수 있습니다.

Answer 2

당신은 그냥있어 매번 필터를 덮어 쓰므로 이전 필터를 추적해야 할 경우 필터를 배열에 저장합니다.

searchWithFilters(filters) { 
    let state = _.extend({}, this.state); 
    state.filters = []; 
    state.filters.push(filters); 
    this.setState(state); 
    this.props.search(this.state); 
    }