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

Question

在我的React Hooks应用程序中，我需要让用户在输入字段中键入1000ms。当1000ms到期时，将使用输入值发送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值添加到输入框中时，用户无法在输入框中输入内容，并且输入框仅接收最后输入的字符。

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

- El Anonimo

---

只是好奇，你是自己编写debounce函数还是使用lodash的？ - Loi Nguyen Huynh

由“just-debounce-it”提供的。 - El Anonimo

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

- Loi Nguyen Huynh

---

这是我对你的解决方案所做的更改，以使其产生所需的结果。请考虑将它们添加到解决方案中，以便我可以接受它。const debouncedApiCall = useCallback(debounce((text) => getRecordsForPage(1, text, '', '', '', '', 10, {}), 1000), []);。useEffect(() => { debouncedApiCall(nameFilter); }, [nameFilter, debouncedApiCall]);。input元素代码与您提供的解决方案相同。getRecordsForPage是发送请求的API调用方法。 - El Anonimo

感谢您提供优美且及时的解决方案。在const debouncedApiCall中的useCallback中，您遗漏了[]依赖数组。请添加它，以使代码看起来正确。 - El Anonimo

@ElAnonimo 抱歉，我已经有一段时间没有使用React了，也故意忽略了它。感谢您的纠正。 - Loi Nguyen Huynh

请从 getRecordsForPage 参数中删除 , 1000。这是 debounce 超时值。getRecordsForPage 参数仅在第一个括号中列出。 - El Anonimo