useDebounce Hook 不允许我输入

如何解决useDebounce Hook 不允许我输入

我正在尝试制作一个简单的去抖动钩子（从视频中实现）并在上下文中使用它，但它不起作用。更有趣的是，它不允许我在输入中输入任何内容。我将处理函数和状态存储在 Context 中，并将必要的东西传递给子组件。

useDebounce.js

import { useState } from 'react';

export default function useDebounce() {
  const [typingTimeout,setTypingTimeout] = useState('');

  function debounce(func,wait) {
    clearTimeout(typingTimeout);
    const timeout = setTimeout(() => {
      func();
    },wait);

    setTypingTimeout(timeout);
  }

  return debounce;
}

上下文 API

 const [text,setText] = useState('');
 const debounce = useDebounce();

 const handleSearch = e => {
    if (e.target.value === '' || e.target.value.match(/^[0-9]+$/)) {
       debounce(() => setText(e.target.value),1000);
    }
  };

解决方法

问题出在这一行。执行超时时，e.target.value 为空/未定义。状态更新是异步过程，这里的事件参数是 Synthetic Event 和 pooled（仅与 React 相关）。这意味着 SyntheticEvent 对象将被重用，并且在调用事件处理程序后所有属性都将被取消。

debounce(() => setText(e.target.value),1000);

超时内的这部分 setText(e.target.value) 不起作用：

改为：

const value = e.target.value; //--> store the value
debounce(() => setText(value),1000);