reactjs Lodash去抖动没有像预期的那样阻止分派onChange

x8goxv8g  于 2023-11-18  发布在  React
关注(0)|答案(2)|浏览(106)

目前,我有一个复选框列表,onChange将向服务器请求返回一些数据。然而,我使用lodash debounce尝试仅当用户在一定时间后停止选择多复选框时才发出请求。
目前,它阻止直接调度,但将调度后,去抖动时间已经满足,而不是当用户已经停止与复选框交互.有人能告诉我,我将如何实现这一点,或者我在哪里出错?
谢谢你,谢谢

import React, { useContext, useState, useEffect } from 'react';
import { Context } from '../../pages/search-and-results/search-and-results.js';
import debounce from 'lodash.debounce';

const FilterCheckbox = ({ name, value }) => {
  const checkboxContext = useContext(Context);
  const [checked, setChecked] = useState(false);
  const debounceCheckboxSelection = debounce(dispatchCheckbox, 2000);

  function dispatchCheckbox(type, value) {
    checkboxContext.dispatch({
      type: type,
      payload: { value }
    });
  }

  return (
    <Label>
      <FilterInput
        type="checkbox"
        name={name}
        onChange={() => {
          if (checked) {
            debounceCheckboxSelection('REMOVE_SELECTED_PROPERTY_TYPE', value);
            setChecked(false);
            return;
          }
          debounceCheckboxSelection('SET_SELECTED_PROPERTY_TYPE', value);
          setChecked(true);
        }}
        checked={checked}
      />
      {name}
    </Label>
  );
};

export default FilterCheckbox;

个字符

yjghlzjz

yjghlzjz1#

你的去抖动函数在每次重新渲染时都会被创建,以修复它:
您可以使用useRef,它返回一个ref对象,该对象将在组件的整个生存期内持续存在:

const debounceCheckboxSelection = useRef(
  debounce(dispatchCheckbox, 2000);
)

字符串
并使用debounceCheckboxSelection.current访问其初始值:

<FilterInput
  type="checkbox"
  name={name}
  onChange={() => {
    if (checked) {
      debounceCheckboxSelection.current('REMOVE_SELECTED_PROPERTY_TYPE', value);
      setChecked(false);
      return;
    }
    debounceCheckboxSelection.current('SET_SELECTED_PROPERTY_TYPE', value);
    setChecked(true);
  }}
  checked={checked}
/>


或者你可以使用useCallback将返回一个回调的备忘录化版本,只有当它的任何依赖关系改变时才会改变:

const debounceCheckboxSelection = useCallback(
  () => debounce(dispatchCheckbox, 2000), []
)

gcuhipw9

gcuhipw92#

<input onChange={_.debounce((e)=> dispatch(search(e.target.value)), 300)} />

字符串
可以做类似的事情,并记住导入lodash和调度

相关问题