简单的 Debounce 在 react 16 中不起作用，但在 jsfiddle 和 react 14.3 中起作用答案

【问题标题】：simple Debounce not working in react 16 but works in jsfiddle with react 14.3简单的 Debounce 在 react 16 中不起作用，但在 jsfiddle 和 react 14.3 中起作用
【发布时间】：2018-03-11 18:17:59
【问题描述】：

这在 react 16 中不起作用，但这个 jsfiddle 可以正常工作：https://jsfiddle.net/kp04015o/9/

任何人都可以调试这个错误，为什么？无法读取 null 的属性“值”，在 handleChange = debounce(e => this.setState({searchTerm: e.target.value}), 1000);

import React from 'react';
import ReactDOM from 'react-dom';

const debounce = (cb, wait) => {
  let timeout;

  return function() {
    let callback = () => cb.apply(this, arguments);

    clearTimeout(timeout);
    timeout = setTimeout(callback, wait);
  }
}

class Debounce extends React.Component {
  state = {
    searchTerm: '',
  };

  handleChange = debounce(e => this.setState({searchTerm: e.target.value}), 1000);

 render() {
   return (
     <div>
       <input type="text" onChange={this.handleChange}/>
       <div>Search Value 2: {this.state.searchTerm}</div>
     </div>
    );
  }
}

ReactDOM.render(<Debounce />, document.getElementById('root'));

【问题讨论】：

标签： reactjs debouncing

【解决方案1】：

了解Event Pooling

这里有一个工作代码：

class Debounce extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  state = {
    searchTerm: '',
  };

  setSearchTerm = debounce((searchTerm) => this.setState({ searchTerm }), 1000);

  handleChange(e) {
    this.setSearchTerm(e.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <div>Search Value 2: {this.state.searchTerm}</div>
      </div>
    );
  }
}

或者更好地使用 ES7 装饰器和 decko 模块：导入 { debounce, bind } from 'decko';

class Debounce extends React.Component {
  state = {
    searchTerm: '',
  };

  @debounce(1000)
  setSearchTerm(searchTerm) {
    this.setState({ searchTerm });
  }

  @bind
  handleChange(e) {
    this.setSearchTerm(e.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <div>Search Value 2: {this.state.searchTerm}</div>
      </div>
    );
  }
}

【讨论】：

谢谢，成功了。而且事件池链接也很有帮助。另外，我认为出于占用空间的原因，最好使用我提到的简单去抖动功能而不是模块？我将 debounce 函数保存在 util 文件夹中并导入它而不是任何库。

【解决方案2】：

我觉得我知道这一点。

尝试改变这个：

<input type="text" onChange={this.handleChange} />

到任一：

<input type="text" onChange={this.handleChange.bind(this)} />

或：

<input type="text" onChange={(e) => this.handleChange(e)} />

这是我每次看到 React 事件未定义的内容时的直觉反应，因为您的默认状态已被处理。如果这可行，那是因为执行上下文或词法环境与它可能出现的维度不同。

【讨论】：