React 自动完成与 react-virtualized 渲染和搜索大型数据集

Question

我正在尝试搜索包含 15000 多个值的数组。我想使用 react-autocomplete 来做到这一点，并使用 react-virtualized List 组件呈现如此大的数据列表。

这是我的尝试。我面临的问题是我无法在搜索栏中输入任何内容，不知道为什么。随意编辑我当前的代码或完全重写/重构代码，因为我仍在测试最好的方法是什么。

***在codesandbox中没有渲染 https://codesandbox.io/s/nifty-meninsky-qirjk?file=/src/index.js

在我的本地计算机上，当我单击搜索栏时会呈现列表，但我无法在框中输入内容

  let searchBar;


  let searchingFor;

  if (clientList !== undefined) {

    const renderItem = (item) => {
      return <div>{item.name}</div>;
    };

    const onSelect = (item) => this.setState({ selection: item });
    console.log(clientList[1].clientName);

    const renderMenu = (items, searchingFor, autocompleteStyles) => {
      return (
        <List
          width={500}
          height={600}
          rowHeight={50}
          rowCount={clientList.length}
          rowRenderer={({ key, index, style, parent }) => {
            const client = clientList[index];
            return (
              <div key={key} style={style}>
                {" "}
                <h2>{client.clientName}</h2>
              </div>
            );
          }}
        />
      );
    };

  
    const searchTerm = searchingFor;
    let data = searchTerm
      ? clientList.filter((item) => item.clientName.includes(searchTerm))
      : [];
    searchBar = (
      <div>
        {" "}
        <Autocomplete
          renderItem={renderItem}
          items={data}
          getItemValue={(item) => item.clientName}
          value={searchingFor}
          onChange={(e, value) => (searchingFor = value)}
          onSelect={onSelect}
          renderMenu={renderMenu}
        />
     
      </div>
    );
  }

  return (
    <div>
      <Grid container>
        <Box>{searchBar} </Box>
      </Grid>
    </div>
  );

Answer 1

DEMO

总的来说，您的想法是正确的。我的回答只是对代码的重构和一些关键的更改。另外我已经更新了反应。

import React, { useState } from "react";
import { List } from "react-virtualized";

import Autocomplete from "react-autocomplete";

const rowRenderer = (data, onSelect) => ({ key, index, style }) => {
  const client = data[index];
  return (
    <div key={key} style={style} onMouseDown={onSelect.bind(null, client)}>
      <h2>{client.title}</h2>
    </div>
  );
};

const renderMenu = (data, onSelect) => () => {
  return (
    <List
      width={500}
      height={600}
      rowHeight={50}
      rowCount={data.length}
      rowRenderer={rowRenderer(data, onSelect)}
    />
  );
};

export default function Search() {
  // default valse should be empty string
  const [searchTerm, setSearchTerm] = useState("");

  if (top100Films !== undefined) {
    let data = top100Films; // show all items by default

    if (searchTerm.length > 0) {
      data = top100Films.filter(item =>
        // title.toLowerCase is used for case insensitivity
        item.title.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    const onSelect = item => setSearchTerm(item.title);

    return (
      <div>
        <Autocomplete
          items={data}
          value={searchTerm}
          getItemValue={item => item.title}
          onChange={(e, value) => setSearchTerm(value)}
          renderMenu={renderMenu(data, onSelect)}
          renderItem={item => <div>{item.name}</div>}
          shouldItemRender={() => false}
        />
      </div>
    );
  }
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 }
  // other items are available on Demo page
];