Question

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

1）在输入搜索参数时输入的内容太慢了。

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

对于问题1，我尝试使用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;

Answer 1

对于问题1，在类似情况下，“反应窗口选择”对我非常有用：https://github.com/jacobworrel/react-windowed-select

对于问题2，我发现react-windowed-select重绘非常快。您可以对数据集使用过滤器进行实验，下面是一个代码片段，可以帮助您入门：

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具有非常大的选项列表

1 个答案: