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

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 仅使用结果用户输入而不是每个击键值来查询，但输入保持不受控制。当我使用 value={nameFilter} 将当前 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)} />

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

Set input value with a debounced onChange handler

react-hooks

debounce