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

Question

I have a component which gets a list of employees as a prop. I've also created an input element for filtering the list by string. I moved filtering logic into a function which expects a list of data and a search value so it could return filtered list.

I want to add lodash debounce to search input, so whenever user types something, it would wait 1 second and filter the list out.

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;

Where should I add the _.debounce function and how?

Answer 1

You should not be calling your filterList function in return statement, instead of that it must be called on onChange of TextField.

Something like this:

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
   />
}

Answer 2

Only showing the relevant changes:-

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,
          }}
        />

Explanation : We are calling the debouncedHandler repeatedly via onChange so we need to ensure that handleChange only gets triggered once that burst of 1000 ms is over and no call to debouncedHandler happened within this duration. If another call to debouncedHandler happens within that burst interval a new burst interval starts.

From your component's perspective, we are delaying the execution of our main logic which is inside handleChange by 1000 ms everytime unless the user doesn't enter any other character in the TextField component within that 1000ms , once that 1000 ms are over, the setState will get triggered to state the state ---> meaning a re-render -----> meaning new filteredList and it's display to the user.