useDebounce Hook 不允许我输入

Question

我正在尝试制作一个简单的去抖动挂钩（来自视频的实现）并在上下文中使用它，但它不起作用。更有趣的是，它不允许我在输入中键入任何内容。我将处理函数和状态存储在 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);
    }
  };

Answer 1

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

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

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

改为：

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

useDebounce Hook 不允许我输入

useDebounce Hook doesn't allow me to type

debouncing

reactjs