添加lodash后，反跳反应(onchange event.target.value不起作用)

Question

我想在点击最后一个数字2秒后调用api请求。我想添加lodash-debounce，之后我就不能在输入中写入值了。添加debounce后，事件目标值不起作用，请告诉我我写错了什么。

const handleChange = (event, onChange) => {
try {
const response = searchContractorsById(event.target.value);
const { address, inn, orgName, ogrn, kpp, okpo, okved } = response;
toast.success('Найдена организация по введенному ИНН.');
} catch (error) {
toast.error('По введенному ИНН не найдено ни одной организации.');
}

onChange(event);
};

<Controller
name="inn"
control={control}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
onChange={debounce((e) => handleChange(e, onChange), 2000)}
type="number"
/>
)}
/>

Answer 1

由于在每次重新渲染时都会重新创建debouce，因此不会保存相同的函数实例，因此解决方案是使用useMemo记录debounce函数。这是解决方案：

const debounceChange = useMemo(() => debounce((e) => handleChange(e, onChange), 2000), [onChange,handleChange]);

您的控制器现在：

<Controller
name="inn"
control={control}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
onChange={debounceChange}
type="number"
/>

确保useMemo依赖项(onChange,handleChange(不会在每次渲染时发生变化，从而不会重新创建debounceChange函数