使用去抖动的 onChange 处理程序设置输入值答案

【问题标题】：Set input value with a debounced onChange handler使用去抖动的 onChange 处理程序设置输入值
【发布时间】：2020-04-09 00:04:37
【问题描述】：

在我的 React Hooks 应用程序中，我需要让用户在输入字段中输入 1000 毫秒。当 1000 毫秒到期时，将使用输入值发送 API 请求。

<input type='text' name='name' className='th-input-container__input' onChange={evt => testFunc2(evt.target.value)} />

值设置在testFunc2(evt.target.value):

const testFunc2 = useCallback(debounce((text) => setNameFilter(text), 1000), []);

一旦将 nameFilter 设置为新值，useEffect 就会发出一个 API 请求，因为 nameFilter 是它的依赖项。这样一来，API 仅使用生成的用户输入而不是每个击键值进行查询，但输入不受控制。当我使用value={nameFilter} 将当前nameFilter 值添加到输入时，用户无法在输入中输入，并且输入仅接收最后输入的字符。

如何让用户输入的字符显示在输入中？

【问题讨论】：

只是好奇，你是自己写debounce函数还是用lodash的？
“just-debounce-it”提供的那个。

标签： react-hooks debounce

【解决方案1】：

更新答案：

const debouncedApiCall = useCallback(debounce((text) => {
  getRecordsForPage(1, text, '', '', '', '', 10, {});
}, 1000), [])

useEffect(() => {
  debouncedApiCall(nameFilter);
}, [nameFilter, debouncedApiCall])

<input type='text' value={nameFilter} onChange={evt => setNameFilter(evt.target.value)} />

【讨论】：

以下是我对您的解决方案应用的更改，以使其产生所需的结果。请考虑将这些添加到解决方案中，以便我接受。 const debouncedApiCall = useCallback(debounce((text) => getRecordsForPage(1, text, '', '', '', '', 10, {}), 1000), []);。 useEffect(() => { debouncedApiCall(nameFilter); }, [nameFilter, debouncedApiCall]);。 input 元素代码与您的解决方案中提供的一样。 getRecordsForPage是发送请求的API调用方法。
感谢您及时的解决方案。您错过了const debouncedApiCall 中useCallback 中的[] dep 数组。请添加它，以便代码看起来正确。
@ElAnonimo 抱歉，我有一段时间没有使用 React，故意错过了它。感谢您的指正。
请从getRecordsForPage 参数中删除, 1000。这是debounce 超时值。 getRecordsForPage 参数仅在第一个括号中列出。