Question

我有一个反应选择小部件，用于搜索项目。目前，我将15,000个项目的列表返回到react-select中，供用户在其中进行搜索。不幸的是，当用户开始键入或滚动选择时，反应选择变得非常缓慢并滞后。

我尝试使用localStorage，但是问题仍然存在

这是react-select小部件的错误，还是有解决此问题的高级方法？

PS：有反应的初学者

组件

 state = {
         productData:[],
         searchable:true
      };

    fetchAll(){
            return this.fetchPost().then(([response,json]) => {
               console.log(response);
               if(response.status === 200)
               {
                  this.setState({
                     itemData: json.data.items
                  })         
               }
            })
         }               
         fetchPost(){
            const URL = 'http://domain/api/';
            return fetch(URL, {method:'GET',headers:new Headers ({
               'Accept': 'application/json',
               'Content-Type': 'application/json',
                  })})
            .then(response => Promise.all([response, response.json()]));
         }



          render(
          let options = this.state.productData.map(function (product)
          {
          return {value: product.name, label: product.name};
          })
              return{ 
                <Select style={select}
                                  value = {this.state.value}
                                  onChange = {this.handleChange}
                                  clearable = {this.state.clearable}
                                  searchable = {this.state.searchable}
                                  labelKey = 'name'
                                  valueKey = 'name'
                                  options={options}
                                />  

    })

Answer 1

通过虚拟化和分页反应，您可以在select内滚动来处理如此大量的数据。

但是仍然可以如何从该数据执行内联搜索，因为在分页之后仅可以搜索一定数量的数据，而现在仅在搜索时才执行该操作，那么尚未加载的数据又如何呢？ / p>

您认为用户想要滚动这么多数据吗？这是非常糟糕的经历。

因此，更可取的方法是使用 Async React Select ，该功能允许用户通过调用api来搜索数据，即不再进行内部搜索。

异步选择是针对此类用例而设计的，它允许使用分页在select中加载数据，还允许在加载的数据之外进行搜索。

React-从API加载数据时选择非常慢

1 个答案: