如何在排序和筛选数据时设置Reaction组件的加载状态？ [英] How to set a loading state for react component while sorting and filtering data?

问题描述

我正在尝试实现一个表，并对表中的数据进行筛选和搜索。由于搜索和排序需要一段时间，因此我想实现一个微调显示，以显示搜索/筛选正在运行。

下面是我如何实现该组件的，我调用filterData/searchData来搜索数据并返回作为道具传递给网格表组件的结果以及数据的显示位置。

 {this.state.search && this.state.filter &&
                      <GridTable  
                      results= {filterData(this.state.filter,searchData(this.state.search,this.state.Data))}
                        />}
                      { this.state.search && !this.state.filter &&
                        <GridTable 
                        results = {searchData(this.state.search,this.state.Data)}
                        />}
                      { !this.state.search && this.state.filter &&
                          <GridTable 
                          results= {filterData(this.state.filter,this.state.Data)}
                          />}
                      { !this.state.search && !this.state.filter &&
                            <GridTable  
                            results = {this.state.Data}
                            />}

我应该在哪里实现加载状态并设置其状态？我很困惑，因为我直接将搜索/过滤函数的结果传递给道具。

推荐答案

在Render方法中，您可以像

一样实现一个加载器

<Loader visible={this.state.visibility}>

在searchData方法中，您可以将该加载器的可见性在第一行设置为true，在最后一行设置为false，如下所示

searchData = () => {
  // Start the loader
  this.setState({
    visibility: true,
  });

  //  ....Your logic goes here

  // Stop the loader
  this.setState({
    visibility: false,
  });
};

这篇关于如何在排序和筛选数据时设置Reaction组件的加载状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！