reactjs - 如何在排序和过滤数据时为 react 组件设置加载状态？

Question

我正在尝试实现一个表并从表中过滤和搜索数据。由于搜索和排序需要一段时间，我想实现一个微调显示来显示搜索/过滤正在运行。
下面是我如何实现该组件，我调用 filterData/searchData 来搜索数据并将结果作为 Prop 传递给 Grid Table 组件以及显示数据的位置。

 {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}
                            />}

我应该在哪里实现加载状态并设置其状态？我很困惑，因为我直接将搜索/过滤功能的结果传递到 Prop 中。

Answer 1

在您的渲染方法中，您可以实现一个加载程序，例如

<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
}) 
}