React钩子中的 SetTimeOut不允许写入输入文本

Question

当输入文本包含文本并向我的API发出请求时，我试图等待2秒。我把这个函数写成一个叫做useBounce:

的react钩子

const useDebounce = (func, milliseconds) => {
const time = milliseconds || 400
let timer
return event => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(func, time, event)
}
}
export default useDebounce

我有一个onChange输入当我试图写react时它不允许我这样做并且调用函数不会执行我的API

const searchDebounce = useDebounce((e) => {
setInput(e.target.value);
e.preventDefault()
console.log(e.target.value)
}, 2000) 
return (
<>
<input
type="text"
onChange={ searchDebounce }
value={input}
className='border-2 border-cyan-500'
/>
</>
)

现在我正试图通过控制台查看输入中写入的内容，但由于它不允许我写入，因此控制台为空白。

谢谢你的帮助。

Answer 1

它可以与你的代码进行微小的更改，我不知道确切的原因

const useDebounce = (func, milliseconds) => {
const time = milliseconds || 400;
let timer;
return (event) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(func, time, event.target?.value);
};
};
const [input, setInput] = useState('');
const searchDebounce = useDebounce((e) => {
setInput(e);
}, 2000);

return (
<>
<input
type="text"
onChange={searchDebounce}
className="border-2 border-cyan-500"
/>
</>
);

问题是，如果你想实现debounce函数来搜索你的输入，你不应该debounce函数来更新输入状态(setInput)，因为它也会在用户输入时延迟文本输入值。

Answer 2

下面是相同

的示例

const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value]);
return debouncedValue;
};

上面是我自定义的useDebounce钩子，并延迟代码

下面的输入检查

export const Debouncing = () => {
const [value, setValue] = useState("");
const delayedValue= useDebounce(value, 2000);
// useEffect(()=>{
//apiCall()  api call goes here
//},[delayedValue]);
return (
<>
<h1>Debouncing</h1>
Current: {value} - Debounced: {delayedValue}
<input
value={value}
onChange={(e) => setValue(e.target.value)}
style={{ margin: "30px" }}
placeholder="input search"
/>
</>
);
};