调用其他组件后如何在组件中保持状态

Question

我的搜索功能有两个组件，一个用于选择搜索过滤器，一个用于执行搜索查询。每次我选择一个过滤器时，都会重新加载状态，因此我无法选择多个过滤器。有没有办法调用搜索组件并让我的 searchfilter 组件保持其状态？

在我的 searchfilters 组件中，我有这个：

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

在我的搜索组件中，我有：

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

我有这个方法：

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

Answer 1

您只能使用 SearchComponent 的状态来存储过滤器，而不是使用 SearchFilters 的状态。 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);
}

您也可以将它们存储在 redux 中，这可能是一个不错的选择。

Answer 2

您只是每次都覆盖您的过滤器，因此如果您需要跟踪以前的过滤器，我会将它们存储在一个数组中。

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