1

我正在使用带有 Stage 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

我一定遗漏了一些东西，但我认为两者基本上都是为类分配属性值的方法。

4

3 回答 3

6

由于您已更新代码：问题在于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);
}
于 2018-06-28T22:05:14.690 回答
1

也许应该是：

class Test extends React.Component {
    ...
}
于 2018-06-28T19:30:12.620 回答
0

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

debouncedHandleResize = debounce(this.handleResize, 1000);

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

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

有了这些知识，我编写课程的新方法和成功方法是：

class Test extends Component {
  someValue = 'Hello';

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

  handleResize = debounce(() => console.log(this.someValue), 1000)
}
于 2018-06-28T21:42:50.007 回答