具有非常大的选项列表的 React Select

关键词：

【中文标题】具有非常大的选项列表的 React Select【英文标题】：React Select with very large options lists 【发布时间】：2018-08-13 14:42:59 【问题描述】：

我有一个选择组件，它需要处理其中大约 7,000 个选项。我遇到了两个问题。

1) 输入搜索参数时加载速度太慢。

2) 我需要过滤所有选项并禁用以前选择的选项（从我从数据库加载的值中）或刚刚在此页面加载时选择的选项。

对于第一个问题，我尝试利用https://github.com/bvaughn/react-select-fast-filter-options，它适用于第一页加载。每当我尝试以任何方式修改选项时都会遇到问题，正如您将看到的那样，我最初尝试通过 ajax 调用（我可以更改）加载选项，或者如果我需要动态禁用选项，我认为这可能会中断它。

对于第 2 个问题，当我尝试过滤所有这些选项时，需要很长时间，因为每次有人在列表中进行选择时，我都会循环通过所有 7,000 个选项。

这方面的一些指导可能会有所帮助。为了进一步了解这里是我到目前为止的代码：

import React, Component from 'react'
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import VirtualizedSelect from 'react-virtualized-select'
import axios from 'axios';

class StockSearch extends Component 
    static propTypes = 
        exchanges: PropTypes.array.isRequired,
        onSelectChange: PropTypes.func.isRequired,
        searchDisabled: PropTypes.bool.isRequired,
        picks: PropTypes.array.isRequired,
        stock_edit_to_show: PropTypes.number
    

    state = 
        stocks: [],
        selected: []
    

    componentWillReceiveProps = (nextProps) => 

    

    /**
     * Component Bridge Function
     * @param stock_id stocks id in the database
     */
    stockSearchChange = (stock_id) => 
        this.props.onSelectChange(stock_id);
    

    componentWillMount = () => 
        this.fetchStocks(this.props.exchanges);
    

    /**
     * Responsible for fetching all of the stocks in the database
     * @param exchanges comma denominated list of exchange ids
     */
    fetchStocks = (exchanges) => 
        let stringExchanges = exchanges.join();
        axios.get('/stock-search-data-by-exchange/', 
            params: 
               exchanges: stringExchanges
            
        )
        .then(response => 
            this.setState(
                stocks: response.data
            )
        )
        .catch(error => 
            console.log(error);
        )
    

    /**
     * handles selected option from the stock select
     * @param selectedOption
     */
    handleSelect = (selectedOption) => 
        this.stockSearchChange(selectedOption.value);
    

    render() 
        return (
            <div className="stock-search-container">
                <VirtualizedSelect
                    name="stock-search"
                    options=this.state.stocks
                    placeholder="Type or select a stock here..."
                    onChange=this.handleSelect
                    disabled=this.props.searchDisabled
                    value=this.props.stock_edit_to_show
                />
            </div>
        )
    


export default StockSearch;

【问题讨论】：

我已经使用原生 见 react-select didn't work for long lists · Issue #2850, react-window 解决方案似乎很有希望 【参考方案1】：

对于问题 #1，react-windowed-select 在类似情况下对我非常有用：https://github.com/jacobworrel/react-windowed-select

对于问题 #2，我发现 react-windowed-select 重绘非常快。你可以用你的数据集试验过滤器，这里有一个代码 sn-p 让你开始：

const startTime = Date.now()

// Create a 7000 element array with a bunch of content, in this case junk strings
array = [...Array(7000)].map(i => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5))
const arrayBuiltTime = Date.now()

// Filter out any string with the letter 'q' to emulate a filtering operation
const filteredArray = array.filter(i => !i.includes('q') )
const doneTime = Date.now()

// See how long it takes :-)
console.log(startTime)
console.log(arrayBuiltTime)
console.log(doneTime)

https://codepen.io/smeckman/pen/zYOrjJa?editors=1111

【讨论】：

修复 react-select 下拉列表的高度（React Material UI）

...使用react-select实现了下拉菜单，使用它会显示预先输入的选项，但最初下拉列表很大并且占据了整个页面。我想知道如何将react-select下拉列表设置为固定高 查看详情

匹配两个具有容差的非常大的向量（快速！但节省工作空间）

】匹配两个具有容差的非常大的向量（快速！但节省工作空间）【英文标题】：Matchingtwoveryverylargevectorswithtolerance(fast!butworkingspacesparing)【发布时间】：2018-04-0800:39:54【问题描述】：考虑我有两个向量。一个是包含所有感兴趣值... 查看详情

GCP：与硬编码值相比，从数组中选择查询具有非常大的流程数据要运行

】GCP：与硬编码值相比，从数组中选择查询具有非常大的流程数据要运行【英文标题】：GCP:selectquerywithunnestfromarrayhasverybigprocessdatatoruncomparedtohardcodedvalues【发布时间】：2020-07-1802:22:46【问题描述】：在bigQueryGCP中，我试图在表中... 查看详情

通过 http 为非常大的播放列表发送数据的最有效方法是啥？

...据库中提取所有歌曲的列表并将其发送给客户端。客户端具有动 查看详情

select列表框中的option选项显示图片

...接显示在下拉列表中的选项中，如果不能达到或代码量太大的话那我就退而求其次，下拉列表中只显示文字，然后列表框旁边显示对应的图片。再说一下我的要求：1.图片不是存在该文件的同目录下，而是存储在相对于此目录的... 查看详情

如何在 Laravel 中有很多选项的非常大的选择标签中设置默认选择选项？

】如何在Laravel中有很多选项的非常大的选择标签中设置默认选择选项？【英文标题】：HowtosetdefaultselectedoptioninverybigselecttagwithmanyoptionsinLaravel?【发布时间】：2020-12-0420:45:21【问题描述】：我有3个选择标签，里面有很多选项。一... 查看详情

如何通过索引从一个非常大的列表中有效地删除元素？

】如何通过索引从一个非常大的列表中有效地删除元素？【英文标题】：HowcanIefficientlyremoveelementsbyindexfromaverylargelist?【发布时间】：2020-08-1921:29:41【问题描述】：我有一个非常大的整数列表（大约20亿个元素）和一个带有索引的... 查看详情

用嵌套列表和嵌套字典列表展平一个非常大的 Json

】用嵌套列表和嵌套字典列表展平一个非常大的Json【英文标题】：FlatteningaverylargeJsonwithnestedlistsandnesteddictlist【发布时间】：2021-11-0508:39:25【问题描述】：我需要扁平化/规范化非常大的分层JSON记录。我已经用json_normalize尝试了... 查看详情

在 React 中使用多个选项从 <select> 中检索值

】在React中使用多个选项从<select>中检索值【英文标题】：Retrievingvaluefrom<select>withmultipleoptioninReact【发布时间】：2015-04-2121:11:39【问题描述】：设置选择框选择哪个选项的React方法是在&lt;select&gt;本身上设置一个特... 查看详情

如何在基于 webpack-react-node 的网站中处理非常大的数据（100000 个 javascript 对象）？

】如何在基于webpack-react-node的网站中处理非常大的数据（100000个javascript对象）？【英文标题】：HowdoIhandleverylargedata(100000javascriptobjects)inwebpack-react-nodebasedwebsite?【发布时间】：2019-07-2304:40:43【问题描述】：我有一个基于react-node... 查看详情

使用 React 根据另一个下拉列表更新选择的选项

】使用React根据另一个下拉列表更新选择的选项【英文标题】：Updateaselect\'soptionsbasedonanotherdropdown,usingReact【发布时间】：2021-02-0212:40:58【问题描述】：我的表单中有2个选项。第二次选择的选项是根据第一次选择生成的。一切正... 查看详情

在 C++ 中声明具有默认值的非常大的数组

】在C++中声明具有默认值的非常大的数组【英文标题】：declarereallylargearraywithdefaultvalueinc++【发布时间】：2017-12-1709:29:46【问题描述】：我要声明6个大数组，长度为64800的int值。我将数组声明为：intitem_value_1[64800]=0,5,10,...,1025;在... 查看详情

从非常大的对象数组列表中查找所需数据

】从非常大的对象数组列表中查找所需数据【英文标题】：FindingRequiredDataFromAVeryLargeArrayListOfObjects【发布时间】：2020-09-1906:07:58【问题描述】：一个Arraylist包含190,000个结构对象srno:51,health_facility_name:"keeraipatti",address:"Keeraipattibuild... 查看详情

试图在python中读取一个非常大的文本列表[重复]

】试图在python中读取一个非常大的文本列表[重复]【英文标题】：Tryingtoreadanextremelylargetextlistinpython[duplicate]【发布时间】：2017-04-1211:30:23【问题描述】：我目前正在尝试通过删除不相关的数据来缩小大型列表的大小。我目前正在... 查看详情

React 的大名单性能

...：数组，请求参数，currentSelectedIndex:整数files是一个可能非常大的数组，包含文件路径 查看详情

具有高级格式选项的列表框组件？

】具有高级格式选项的列表框组件？【英文标题】：ListboxComponentwithadvancedformattingoptions?【发布时间】：2012-09-0213:48:10【问题描述】：我正在寻找一个提供高级文本格式选项的列表框样式组件。我知道您可以使用OnDrawItem过程来绘... 查看详情

如何从select2多选中的选项列表中删除选定的选项并按选择的顺序显示选定的选项

】如何从select2多选中的选项列表中删除选定的选项并按选择的顺序显示选定的选项【英文标题】：Howtoremoveselectedoptionfromtheoptionlistinselect2multiselectandshowselectedoptionsintheordertheyareselected【发布时间】：2016-08-0912:53:23【问题描述】：... 查看详情

如何使用 select2 插件隐藏下拉列表中的选项？

】如何使用select2插件隐藏下拉列表中的选项？【英文标题】：Howtohideoptionsinadropdownusingselect2plugin?【发布时间】：2021-05-1215:35:06【问题描述】：我们正在通过列表填充下拉列表中的选项。这些值被添加到Action类的列表中。当option... 查看详情