无法从输入反应js中的搜索中删除第一个字符答案

【问题标题】：unable to remove first character from search in input react js无法从输入反应js中的搜索中删除第一个字符
【发布时间】：2020-11-07 04:31:03
【问题描述】：

我创建了一个带去抖动的搜索字段。一切正常，但是当我尝试用退格键清空搜索字段时，它会不断重新显示所有字符并且不会删除它们（第一个字符始终存在）。

您可以在附加的 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();

问题出在这个去抖动功能上。有人可以在这方面帮助我吗？为什么它不删除第一个字符？谢谢

【问题讨论】：

问题似乎出在// value update function 中，事实上你在debounceFunc 之外调用setFieldValue 所以你可能有两种方式来更新值，而这两种方式会发生冲突彼此
这个搜索字段是一个子组件和父组件的更新函数，它处理值并发送回后端@Aprillion
您在此处列出的代码没有重现问题 => 请检查How to create a Minimal, Reproducible Example
刚刚更新了我的问题，请看一下@Aprillion
只是反馈：我习惯于看到去抖动看起来更像这样...let dbncd = debounce(fn, delay); ... onchange = dbncd; 这样，例如，fn 会收到，比如说，Event。跨度>

标签： javascript reactjs search debounce

【解决方案1】：

我改变了 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();

【讨论】：

您的 debounceFunction 需要 2 个参数，而您却没有调用它
@Aprillion 我通过传递 2 个参数来调用它 -> debounceFunc(onUpdate, 300);事实上这就是我改变的:)
得到错误 debouncedUpdate 不是一个函数，如果我只是改变 debounceFunction 是给回调不是一个函数。你能看看这个吗
是的，您的 debounceFunc 接受 0 个参数，而您使用 2.. 调用它。这是代码中的第二个问题
@UsmanSaleem 已更改 const debouncedUpdate = debounceFunc(onUpdate, 300);到 const debouncedUpdate = debounceFunction(onUpdate, 300);我的错，这是一个错字。你现在可以检查一下吗:)

【解决方案2】：

第一个问题是<Input value={fieldValue || value}
=> 只使用本地状态： <Input value={fieldValue} 立即更改可见值。

第二个问题是 this.queryParams.keyword 是实例属性，而不是 React 状态
=> 使用 this.state.... 和 this.setState(...)（或 Hooks）更新父级中的去抖动状态

【讨论】：