如何从区间回调中访问创建区间的对象？

Question

我是 JavaScript 新手，我目前的问题没有提出来。 我在这里有一个 React 应用程序，我尝试通过计时器功能来扩展它。我创建了一个计时器（类似于这个问题：setInterval in a React app）并且计时器功能本身正在工作。

但是计时器回调（或更确切地说是setInterval 回调）不起作用。在setInterval 中，变量this 指向Windows，但我认为它应该指向App，这是创建计时器并包含setInterval 回调的类/对象。因此我得到以下错误。

以下是我所做的关键代码更改：

class App extends Component {

  //...

  componentDidMount() {

    //...

    var intervalId = setInterval(this.timer, 5000);
    // store intervalId in the state so it can be accessed later:
    this.setState({intervalId: intervalId});
  }

  componentWillUnmount() {
    
    //...

    // use intervalId from the state to clear the interval
    clearInterval(this.state.intervalId);
  }

  timer() {
    for (let i = 0; i < this.state.whitelist.length; i++) {
      this.requestDeviceStatus(this.state.whitelist[i]);
    }
  }

 //...

}

但您可以在此处访问完整的源代码/提交： https://github.com/wewa00/Reacticz/blob/backgroundtimer/src/App.js, （这是相关的提交：02e3e93，6bcabba。）

为什么this 指向Window，我如何从timer() 中访问App？

Answer 1

类型错误

通过 ES6 箭头方法使用计时器功能。

timer=()=>{
   for (let i = 0; i < this.state.whitelist.length; i++) {
        this.requestDeviceStatus(this.state.whitelist[i]);
    }
}

Answer 2

你需要在timer函数中使用bind来访问App。

class App extends Component {

  //...

  componentDidMount() {

    //...

    var intervalId = setInterval(this.timer, 5000);
    // store intervalId in the state so it can be accessed later:
    this.setState({intervalId: intervalId});
    this.timer = this.timer.bind(this); // <------------------------------
  }

  componentWillUnmount() {
    
    //...

    // use intervalId from the state to clear the interval
    clearInterval(this.state.intervalId);
  }

  timer() {
    for (let i = 0; i < this.state.whitelist.length; i++) {
      this.requestDeviceStatus(this.state.whitelist[i]);
    }
  }

 //...

}