Javascript React组件JS中的去盎司

我正在为输入组件编写一个简单的去盎司函数

export const debounce = (func, wait) => {
    let timeout
    return function (...args) {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
            timeout = null
            Reflect.apply(func, this, args)
        }, wait)
    }
}

它从外部文件导入，并用作React组件（Hooks）内的

input

onKeyUp处理程序的换行符

问题：每当

input

中的文本发生更改时，我都会收到“测试”日志，而不是像预期的那样只有一个

---

我做错了什么？

我不确定你的代码有什么问题，但这里有一个钩子可用的版本

import { useEffect, useState } from "react";

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

  return debouncedValue;
};

export default useDebounce;

然后你把它当作

const debouncedValue = useDebounce(inputValue, delay);

---

我不确定你的代码有什么问题，但这里有一个钩子工作的版本

import { useEffect, useState } from "react";

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

  return debouncedValue;
};

export default useDebounce;

然后你把它当作

const debouncedValue = useDebounce(inputValue, delay);

---

您能否使用

handleChange=debounce共享整个组件（…

？是的，请显示组件，因为它在我的codesandbox@mgm793你是用Hooks版本还是类来尝试的？Hooks版本是Functions@mgm793的确，直接绑定到onChange没有问题，但是连接到同一输入的onKeyUp问题再次出现nge功能您可以使用

handleChange=debounce共享整个组件吗（…

？是的，请显示组件，因为它在我的codesandbox@mgm793你是用Hooks版本还是类来尝试的？Hooks版本是Functions@mgm793的确，直接绑定到onChange没有问题，但是连接到同一输入的onKeyUp问题再次出现nge函数