无法将debounce分配给类属性

既然你已经更新了代码:问题是 debouncedHandleResize 和 handleResize 是公共类字段。因为 德布恩塞德尔塞兹 作业优先,你要参考 把手尺寸 在它存在之前。

公共类字段是按顺序计算的,因此

class Test {
  debouncedHandleResize = debounce(this.handleResize, 1000);

  handleResize = () => {
    console.log(this.someValue);
  }
}

相当于

class Test {
  constructor() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);

    this.handleResize = () => {
      console.log(this.someValue);
    }
}

很明显,这不能起作用。

解决方案

更改作业顺序:

class Test {
  handleResize = () => {
    console.log(this.someValue);
  }
  debouncedHandleResize = debounce(this.handleResize, 1000);
}

或许应该是:

class Test extends React.Component {
    ...
}

我发现了问题所在。在我的第二个示例(引发错误的示例)中,类属性的设置如下:

debouncedHandleResize = debounce(this.handleResize, 1000);

这个错误是因为某些它不喜欢的原因而抱怨的 this.handleResize 说这不是一个函数。虽然我不能百分之百地理解这一点,但一个手动传递函数的简单测试却消除了错误:

debouncedHandleResize = debounce(() => false, 1000);

有了这些知识,我写这门课的成功新方法是:

class Test extends Component {
  someValue = 'Hello';

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  handleResize = debounce(() => console.log(this.someValue), 1000)
}