获取 this.startBreak() 不是 react.js 中的 function 错误

Question

我是一个新手，正在开发番茄钟计时器应用程序，在 setInterval() 中调用 function 后出现此错误：

TypeError: this.startBreak is not a function

当然这是微不足道的，所以我会很感激任何建议。 这是代码：

startSession = () => {

let sessionSecondsTotal = (this.state.hours * 60 * 60) + (this.state.minutes * 60) + (this.state.seconds);
let hoursNode = document.getElementById("hours");
let minutesNode = document.getElementById("minutes");
let secondsNode = document.getElementById("seconds");



let hoursShow = this.state.hours;
let minutesShow = this.state.minutes;
let secondsShow = this.state.seconds;


setInterval(function(){                                         
      secondsShow = secondsShow - 1;
      if(secondsShow <= 0){
          secondsShow = 59;
          minutesShow = minutesShow - 1;
      }else if(hoursShow > 0){
        if(minutesShow <= 0){
          hoursShow = hoursShow - 1;
          minutesShow = 59;
        }
      }

      hoursNode.textContent = hoursShow.toString();
      minutesNode.textContent = minutesShow.toString();
      secondsNode.textContent = secondsShow.toString();

      sessionSecondsTotal = sessionSecondsTotal - 1;

      if(sessionSecondsTotal === 0){
        this.startBreak();
      }

  },1000)
}

Answer 1

当您在 javascript 中定义function(){}时，将创建一个新的上下文 ( this )。 您可以在此处阅读有关上下文的更多信息

有很多方法可以处理它：

1）将您以前的上下文保存到变量并在新的 function 中使用它

let hoursShow = this.state.hours;
let minutesShow = this.state.minutes;
let secondsShow = this.state.seconds;
const self = this;


setInterval(function(){                                         
      secondsShow = secondsShow - 1;
      if(secondsShow <= 0){
          secondsShow = 59;
          minutesShow = minutesShow - 1;
      }else if(hoursShow > 0){
        if(minutesShow <= 0){
          hoursShow = hoursShow - 1;
          minutesShow = 59;
        }
      }

      hoursNode.textContent = hoursShow.toString();
      minutesNode.textContent = minutesShow.toString();
      secondsNode.textContent = secondsShow.toString();

      sessionSecondsTotal = sessionSecondsTotal - 1;

      if(sessionSecondsTotal === 0){
        self.startBreak();
      }

  },1000)
}

2) 使用箭头 function，因为它将使用来自上 scope 的上下文

let hoursShow = this.state.hours;
let minutesShow = this.state.minutes;
let secondsShow = this.state.seconds;


setInterval(() => {                                         
      secondsShow = secondsShow - 1;
      if(secondsShow <= 0){
          secondsShow = 59;
          minutesShow = minutesShow - 1;
      }else if(hoursShow > 0){
        if(minutesShow <= 0){
          hoursShow = hoursShow - 1;
          minutesShow = 59;
        }
      }

      hoursNode.textContent = hoursShow.toString();
      minutesNode.textContent = minutesShow.toString();
      secondsNode.textContent = secondsShow.toString();

      sessionSecondsTotal = sessionSecondsTotal - 1;

      if(sessionSecondsTotal === 0){
        this.startBreak();
      }

  },1000)
}

3) 将上下文绑定到新的 function

let hoursShow = this.state.hours;
let minutesShow = this.state.minutes;
let secondsShow = this.state.seconds;


setInterval((function(){                                         
      secondsShow = secondsShow - 1;
      if(secondsShow <= 0){
          secondsShow = 59;
          minutesShow = minutesShow - 1;
      }else if(hoursShow > 0){
        if(minutesShow <= 0){
          hoursShow = hoursShow - 1;
          minutesShow = 59;
        }
      }

      hoursNode.textContent = hoursShow.toString();
      minutesNode.textContent = minutesShow.toString();
      secondsNode.textContent = secondsShow.toString();

      sessionSecondsTotal = sessionSecondsTotal - 1;

      if(sessionSecondsTotal === 0){
        this.startBreak();
      }

  }).bind(this),1000)
}