Javascript 去盎司功能未按预期工作，好像它'；他没有被处决

我试图避免在我的项目中使用lodash，我已经消除了除此之外的所有功能。根据你不需要，这个去盎司应该工作得很好。但是，由于某种原因，它没有被调用

这是我所拥有的

import * as React from "react";

export default function DebouncedSearch() {
  const [value, setValue] = React.useState("");

  const debounce = (
    func: (...params: any[]) => any,
    wait: number,
    immediate = false
  ) => {
    let timeout;

    return function () {
      const later = () => {
        timeout = null;
        if (!immediate) func();
      };
      const callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func();
    };
  };

  const handleChange = React.useCallback(
    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
      debounce(() => {
        setValue(value);
      }, 500);
    },
    []
  );

  return <input value={value} onChange={handleChange} />;
}

import*as React from“React”；
导出默认函数DebouncedSearch（）{
const[value，setValue]=React.useState（“”）；
常数反盎司=(
func:（…参数：any[]）=>any，
等等：号码，
立即=错误
) => {
让超时；
返回函数（）{
const later=（）=>{
超时=空；
if（！immediate）func（）；
};
const callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）func（）；
};
};
const handleChange=React.useCallback(
（{target:{value}}:React.ChangeEvent）=>{
去盎司（（）=>{
设置值（值）；
}, 500);
},
[]
);
返回；
}

我做错了什么

编辑 如果我这样做

  const handleChange = React.useCallback(
    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
      debounce(() => {
        console.log("called");
        setValue(value);
      }, 500)();
    },
    []
  );

const handleChange=React.useCallback(
（{target:{value}}:React.ChangeEvent）=>{
去盎司（（）=>{
控制台日志（“调用”）；
设置值（值）；
}, 500)();
},
[]
);

---

它打印调用的

的次数与onChange事件触发的次数相同，而不是一次。
这样做并避免渲染状态问题的一种方法是使用
useRef

下面我只是使用了一个setInterval，而不是去盎司逻辑，我更喜欢它而不是去盎司

但如果您更喜欢去盎司，那么改为使用去盎司应该很简单


const{useState，useffect，useRef}=React；
函数MyInput（）{
const[value，setValue]=使用状态（“”）；
const v=useRef（{value:''，已更改：false}）；
useffect（（）=>{
常数i=设置间隔（（）=>{
如果（v.电流变化）{
console.log（'change:'+v.current.value）；
v、 current.changed=false；
}
}, 500);
返回（）=>clearInterval（i）；
}, []);
返回{
设定值（即目标值）；
v、 current.changed=true；
v、 current.value=e.target.value；
}}
value={value}
/>;
}
ReactDOM.render（，document.querySelector（'#mount'）

您没有调用debounce returnsHow的函数，这是什么意思？
debounce（（）=>{setValue（value）；}，500）（）如果我这样做，它不会消除变化的影响。如果我开始大量输入，它会添加许多字符，而不是最后一个。我编辑了OP。