无法将反跳分配给类属性

Question

我正在使用带有第2阶段预设的Babel，并且有一个像这样的React组件类：

class Test extends Component {
  someValue = 'Hello';

  componentDidMount() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);
    window.addEventListener('resize', this.debouncedHandleResize);
  }

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

这按预期工作。窗口调整大小后1000毫秒，将触发handleResize方法，并且控制台记录“ Hello”。

为什么我不能执行以下操作？

class Test extends Component {
  someValue = 'Hello';

  debouncedHandleResize = debounce(this.handleResize, 1000);

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

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

在这种情况下，我得到一个错误：

TypeError: Expected a function

我一定会丢失一些东西，但我认为这基本上都是为类分配属性值的方法。

Answer 1

由于您已经更新了代码：问题在于，debouncedHandleResize和handleResize都是公共类字段。由于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);
}