目前,我有一个复选框列表,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;
个字符
2条答案
按热度按时间yjghlzjz1#
你的去抖动函数在每次重新渲染时都会被创建,以修复它:
您可以使用
useRef
,它返回一个ref对象,该对象将在组件的整个生存期内持续存在:字符串
并使用
debounceCheckboxSelection.current
访问其初始值:型
或者你可以使用
useCallback
将返回一个回调的备忘录化版本,只有当它的任何依赖关系改变时才会改变:型
gcuhipw92#
字符串
可以做类似的事情,并记住导入lodash和调度