React应用Android Chrome端快速输入搜索时输入值重复问题求助

遇到这种移动端特定的输入bug确实挺闹心的！我帮你梳理下可能的原因和对应的解决思路：

先贴出你的核心代码方便分析 #

handleChange = event => {
  const { value } = event.target;
  this.setState({
    input: value,
  });
  throttledFetch(value) // api throttling for 500 ms
};

throttledFetch = value => {
  if (checkForNumber(value)) {
    this.callApi1(value);
  } else {
    this.callApi2(value);
  }
};

callApi1 = input => {
  const queryParams = input
    ? {
        url: URL1,
        resultCount: 75,
      }
    : {
        url: URL1,
        sort: 1,
      };
  this.apiRequest && this.apiRequest.cancel();
  this.apiRequest = makeCancelable(autocomplete(queryParams, input));
  this.apiRequest.promise
    .then(json => this.afterFetch({ list: json }))
    .catch(error => {});
};

callApi2 = input => {
  this.apiRequest && this.apiRequest.cancel();
  this.apiRequest = makeCancelable(
    autocomplete(
      {
        url: URL2,
        resultCount: 75,
      },
      input
    )
  );
  this.apiRequest.promise
    .then(json => this.afterFetch({ list: json }))
    .catch(error => {});
};

// 你贴的input代码
<input onChange={handleChange}/>

问题根源分析 #

这个问题仅出现在Android Chrome，快速输入时输入值重复，大概率是React合成事件与Android Chrome原生输入事件的同步冲突，结合你的代码来看，可能的触发点有：

• 如果你的input是受控组件（实际代码中应该绑定了value={this.state.input}），当快速连续输入时，React的state更新周期和Chrome原生输入的事件触发时机不同步，导致state值和真实输入框内容出现偏差，进而渲染出重复的内容；
• Android Chrome的自动补全、预测文本功能可能会干扰输入框的值，尤其是快速输入时浏览器自动插入的内容和React的state更新冲突；
• 虽然节流是控制API请求，但如果节流函数的实现阻塞了事件循环，也可能间接影响state更新的及时性。

针对性解决思路 #

• 确保受控组件的严格绑定
  首先确认你的input是标准受控组件，必须同时绑定value和onChange，避免state和原生输入值脱节：

  <input 
    value={this.state.input} 
    onChange={handleChange}
  />
  

• 使用函数式更新state
  改用函数式更新state，确保每次更新都是基于最新的state值，避免快速输入时的state快照过期：

  handleChange = event => {
    const { value } = event.target;
    // 函数式更新，确保拿到最新的prevState
    this.setState(prevState => ({
      input: value
    }));
    throttledFetch(value);
  };
  

• 禁用浏览器的文本干扰功能
  Android Chrome的自动补全、拼写纠正等功能可能会修改输入框内容，给input加上以下属性禁用这些功能：

  <input 
    value={this.state.input} 
    onChange={handleChange}
    autocomplete="off"
    autocorrect="off"
    autocapitalize="none"
    spellCheck="false"
  />
  

• 尝试使用原生input事件替代React合成事件
  部分Android Chrome版本对React合成事件的处理存在bug，改用原生事件监听试试：

  // 先创建ref
  inputRef = React.createRef();
  
  componentDidMount() {
    // 绑定原生input事件
    this.inputRef.current.addEventListener('input', this.handleNativeInput);
  }
  
  componentWillUnmount() {
    // 移除事件监听
    this.inputRef.current.removeEventListener('input', this.handleNativeInput);
  }
  
  handleNativeInput = (event) => {
    const value = event.target.value;
    this.setState({ input: value });
    throttledFetch(value);
  };
  
  // 渲染input
  <input ref={this.inputRef} value={this.state.input}/>
  

• 检查节流函数的实现
  确认你的节流函数（比如自定义的或lodash的throttle）参数设置合理，比如leading: true确保第一次输入能立即触发，避免因为节流延迟导致的事件堆积干扰state更新。

备注：内容来源于stack exchange，提问作者Dhanush