Question

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

DataRow

该值在DataTable中设置：

<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), []);会发出API请求，因为nameFilter是其依赖项。这样，仅使用结果用户输入而不是每个按键值来查询API，但是输入保持不受控制。当我使用useEffect将当前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处理函数设置输入值

1 个答案: