使用去抖动更改处理程序设置输入值

Question

在我的 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，但输入保持不受控制。当我将当前nameFilter值添加到输入中时value={nameFilter}用户无法键入输入，并且输入仅接收最后一个键入的字符。

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

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