无法将去抖分配给 class 属性

Question

我正在使用带有 Stage 2 预设的 Babel，并且有一个 React 组件 class 如下所示：

class Test extends Component {
  someValue = 'Hello';

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

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

这按预期工作。 window 调整 handleResize 方法大小后 1000 毫秒，控制台记录 '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

我一定是遗漏了什么，但我认为这两种方法基本上都是将属性值分配给 class。

Answer 1

也许应该是：

class Test extends React.Component {
    ...
}

Answer 2

我发现问题出在哪里了。在我的第二个示例（引发错误的示例）中，class 属性设置如下：

debouncedHandleResize = debounce(this.handleResize, 1000);

错误是出于某种原因抱怨它不喜欢 this.handleResize 并说它不是函数。虽然我不是 100% 理解这一点，但手动传递函数的简单测试却消除了错误：

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

有了这些知识，我写 class 的新方法是：

class Test extends Component {
  someValue = 'Hello';

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

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

Answer 3

由于您更新了代码：问题是 debouncedHandleResize 和 handleResize 都是 public class 字段。因为 debouncedHandleResize 赋值在前，所以您试图在它存在之前引用 handleResize。

Public class 字段按顺序求值，所以

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 属性

Can't assign debounce to class property

javascript

ecmascript-6

lodash

reactjs

debounce

解决方案