Javascript 无法从输入中的搜索中删除第一个字符

我用去Bouncing做了一个搜索字段。一切正常，但当我尝试用退格清空搜索字段时，它会不断地重新显示所有字符，并且不会删除它们（第一个字符总是在那里）

您可以在附加的gif中看到它

我的父组件

  class ParentComponent extends React.Component {
        this.queryParam = {
                keyword: ''
             }
   
  keywordSearch = value => {
     const {
       history: { push },
       match: { url },
       location: { search },
       } = this.props;

    queryParams = {...queryParams, keyword: value, };

    push(`${url}?${queryString})
   };
   
   render() {
        <SearchComponent
            value={this.queryParams.keyword}
            onUpdate={this.keywordSearch}
         />
     }
  }

   const SearchComponent = ({ value, onUpdate }) => {
    const [fieldValue, setFieldValue] = useState(value);

    const handleChange = ({ target: { value } }) => {
       debounceFunc(() => {
            onUpdate(value);
         }, 300);
         setFieldValue(value);
        };

   return (
      <Input
      value={fieldValue || value}
      disableUnderline
      onChange={handleChange}
      className={classes.root}
      placeholder='Search'
      startAdornment={
         <InputAdornment position="start">
           <Search className={classes.icon} fontSize="small" />
         </InputAdornment>
        }
     />
  } 

  export const debounceFunction = () => {
    let timeOut = null;
    return (callBack, wait) => {
    if (timeOut) clearTimeout(timeOut);
    timeOut = setTimeout(() => {
        callBack();
     }, wait);
    };
   };
  export const debounceFunc = debounceFunction();

问题在于这个去盎司函数。在这方面有人能帮我吗？为什么不删除第一个字符？

---

谢谢

我已经更改了debounceFunction参数和使用方法。你能试试吗

    const SearchComponent = ({ value, onUpdate }) => {
        const [fieldValue, setFieldValue] = useState(value);
        
const debouncedUpdate = debounceFunction(onUpdate, 300);

        const handleChange = ({ target: { value } }) => {
           debouncedUpdate(value);
            setFieldValue(value);
           };
    
       return (
          <Input
          value={fieldValue || value}
          disableUnderline
          onChange={handleChange}
          className={classes.root}
          placeholder='Search'
          startAdornment={
             <InputAdornment position="start">
               <Search className={classes.icon} fontSize="small" />
             </InputAdornment>
            }
         />
      } 
    
      
    
    export const debounceFunction = (callBack, wait) => {
        let timeOut = null;
        return () => {
        if (timeOut) clearTimeout(timeOut);
        timeOut = setTimeout(() => {
            callBack();
         }, wait);
        };
       };
      export const debounceFunc = debounceFunction();

const SearchComponent=（{value，onUpdate}）=>{
常量[fieldValue，setFieldValue]=使用状态（值）；
const debounceupdate=debounceFunction（onUpdate，300）；
常量handleChange=（{target:{value}}）=>{
去BouncedUpdate（值）；
setFieldValue（值）；
};
返回(
} 
export const debounceFunction=（回调，等待）=>{
让timeOut=null；
return（）=>{
if（超时）cleartimout（超时）；
超时=设置超时（（）=>{
回调（）；
}，等等）；
};
};
export const debounceFunc=debounceFunction（）；

第一个问题是

仅使用本地状态：
使用
此.state….
和
此.setState（…）
（或挂钩）要更新父级中的取消公告状态
问题似乎出在
//值更新函数
中，事实上，您在
debounceFunc
之外调用了
setFieldValue
，因此您可能有两种方法来更新值，这两种方法相互冲突。此搜索字段是一个子组件，并且更新来自父组件的e函数正在处理值并发送回后端@aprillion此处列出的代码不会重现问题=>请检查刚刚更新的我的问题，请查看@aprillion公正反馈：我习惯于看到去盎司看起来更像这样…
让dbncd=去盎司（fn，延迟）；…onchange=dbncd；
这样，例如，
fn
将接收（比如）事件
none@Aprillion我通过传递2个参数->debounceFunc（onUpdate，300）来调用它；事实上，这就是我所更改的：）获取错误debouncedUpdate不是一个函数，如果我只是更改debounceFunction，则give回调不是一个函数。你能看看这个吗是的，你的
debounceFunc
接受0个参数，你用2调用它。。这是你的第二个问题code@UsmanSaleem已更改常量debouncedUpdate=debounceFunc（更新日期，300）；to const debounceupdate=debounceFunction（onUpdate，300）；糟糕的是，这是个打字错误。你现在能查一下吗：）