Wie man den Zustand in der Komponente nach dem Aufruf einer anderen Komponente hält

Question

Ich habe zwei Komponenten für meine Suchfunktion, eine für die Auswahl der Suchfilter und eine für die Suchanfrage. Jedes Mal, wenn ich einen Filter auswähle, wird der Status neu geladen, daher kann ich nicht mehr als einen Filter auswählen. Gibt es eine Möglichkeit, die Suchkomponente aufzurufen und meine Suchfilterkomponente ihren Status beizubehalten?

In meiner searchfilters Komponente Ich habe diese:

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

In meiner Suchkomponente ich habe:

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

Und ich habe diese Methode:

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

Answer 1

können Sie verwenden nur den Zustand Ihrer SearchComponent der Filter zu speichern, anstatt den Zustand SearchFilters zu verwenden. Die toggleFilter Methode wäre in der SearchComponent auch und es würde es als Prop auch senden (oder vielleicht könnten Sie es in searchWithFilters tun, wenn Sie sie immer beide zusammen nennen). Schließlich müssten Sie die Filter als Eigenschaft an die Komponente SearchFilters senden.

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

Dann searchWithFilters erhalten würde nur den neuen Filter und fügen Sie sie in den Zustand des SearchComponent. Es könnte so etwas wie sein:

Sie könnten sie auch in redux speichern, was eine gute Wahl sein könnte.

Answer 2

Sie sind nur Überschreiben Sie Ihre Filter jedes Mal, wenn Sie also die vorherigen Filter verfolgen müssen, würde ich sie in einem Array speichern.

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