如何在这个 React 组件中去抖动搜索功能？

问题描述

我有一个组件，它获取员工列表作为道具。我还创建了一个输入元素，用于按字符串过滤列表。 我将过滤逻辑移到一个函数中，该函数需要一个数据列表和一个搜索值，以便它可以返回过滤列表。

我想为搜索输入添加 lodash debounce，所以每当用户输入内容时，它会等待 1 秒并过滤掉列表。

import React from 'react';
import _ from "lodash"

import { IEmployee } from '../../../store/Employeesstore/reducer'

import AddEmployee from '../AddEmployee/AddEmployee';
import EmployeeItem from './EmployeeItem/EmployeeItem';

import { TextField } from '@material-ui/core';
import InputAdornment from '@material-ui/core/InputAdornment';
import SearchIcon from '@material-ui/icons/Search';

export interface EmployeeProps {
  employees: IEmployee[];
}

class EmployeeList extends React.Component<EmployeeProps> {
  state = {
    searchValue: ''
  };

//function which returns filtered list
  filterList = (employeesList: IEmployee[],searchValue: string) => { 

    return employeesList.filter((item: any) => {
      const fullName = `${item.firstName}${item.lastName}`.toLowerCase();
      const reversedFullName = `${item.lastName}${item.firstName}`.toLowerCase();
      const trimmedSearchValue = searchValue
        .replace(/\s+/g,'')
        .toLowerCase();
      return (
        fullName.includes(trimmedSearchValue) ||
        reversedFullName.includes(trimmedSearchValue)
      );
    });
  };

  render() {
    // saving filtered list data in filteredList variable
    let filteredList = this.filterList(this.props.employees,this.state.searchValue)
      
    return (
      <>
        <AddEmployee />
        <TextField
          style={{ marginLeft: '20px' }}
          size="medium"
          id="input-with-icon-textfield"
          variant="outlined"
          value={this.state.searchValue}
          onChange={(e) => this.setState({ searchValue: e.target.value })}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <SearchIcon />
              </InputAdornment>
            ),}}
          InputLabelProps={{
            shrink: true,}}
        />
        <div>
          <ul
            style={{
              margin: '0px',padding: '0px',listStyle: 'none',display: 'flex',flexWrap: 'wrap',}}
          >
            {filteredList.map((employee) => {
              return <EmployeeItem key={employee.id} {...employee} />;
            })}
          </ul>
        </div>
      </>
    );
  }
}

export default EmployeeList;

我应该在哪里添加 _.debounce 函数以及如何添加？

解决方法

您不应在 return 语句中调用 filterList 函数，而必须在 TextField 的 onChange 上调用它。

像这样：

handleChange = (e) => {
    this.setState({ searchValue: e.target.value })};
    const debouncedCall = _.debounce(() => this.filterList(this.props.employees,e.target.value),1000);
    debouncedCall();    
}

//Rest of your code

render() {
   <TextField
        onChange={(e) => handleChange(e)}
        ...other attributes
   />
}

,

仅显示相关更改：-

constructor (props) {
super(props)
this.state = {
    searchValue: ''
  };
this.debouncedHandler = _.debounce(this.handleChange.bind(this),1000);
}

handleChange = (e) => {
    this.setState({ searchValue: e.target.value })};
}

        <TextField
          style={{ marginLeft: '20px' }}
          size="medium"
          id="input-with-icon-textfield"
          variant="outlined"
          value={this.state.searchValue}
          onChange={this.debouncedHandler}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <SearchIcon />
              </InputAdornment>
            ),}}
          InputLabelProps={{
            shrink: true,}}
        />

说明：我们通过 debouncedHandler 重复调用 onChange，因此我们需要确保 handleChange 仅在 {{1} 爆发时被触发}ms 结束，在此期间没有调用 1000。如果在该突发​​间隔内再次调用 debouncedHandler，则会开始新的突发间隔。

从您的组件的角度来看，除非用户没有在 debouncedHandler 中输入任何其他字符，否则我们每次都将 handleChange 内的主要逻辑的执行延迟 1000 TextField 内的组件，一旦 1000ms 毫秒结束，1000 将被触发以声明状态 ---> 意味着重新渲染 -----> 意味着新过滤列表并显示给用户。