使用去抖 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，但输入仍不受控制。当我将当前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)} />