代码之家 › 专栏 › 技术社区 › CaribouCode

无法将debounce分配给类属性

debounce lodash ecmascript-6 reactjs javascript

CaribouCode · 技术社区 · 6 年前

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

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

3 回复 | 直到 6 年前

Felix Kling 6 年前

既然你已经更新了代码:问题是 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);
}

Daniel Reinoso 6 年前

或许应该是:

class Test extends React.Component {
    ...
}

CaribouCode 6 年前

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

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)
}

推荐文章