Javascript _这3不是一个函数（React）

我有一个简单的倒计时组件，用户输入两次，然后倒计时两次之间的秒数。启动、停止和重置工作。除此之外，当我重置倒计时并输入两个新时间（不刷新页面）时，我遇到以下错误：

TypeError:\u this3.start不是一个函数

>108 | this.start（）}>start

下面是我的代码：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.start = this.start.bind(this);
    this.toTimestamp = this.toTimestamp.bind(this);
    this.getDifference = this.getDifference.bind(this);

    this.state = {
      input1: '',
      input2: '',
      countdown: null
    }
  }


input1ContentChange(e){
  const text = e.target.value;
  this.setState(()=>{
    return {input1: text};
  })
}

input2ContentChange(e){
  const text = e.target.value;
  this.setState(()=>{
    return {input2: text};
  })
}


toTimestamp(input){
  let time = input.split(':');
  let seconds = ((+time[0]) * 60 * 60) + ((+time[1]) * 60) + (+time[2]);

  return seconds;
}

getDifference(input1, input2){
  let difference = (this.toTimestamp(input2))- (this.toTimestamp(input1));

  if(this.toTimestamp(input2) < this.toTimestamp(input1)){
    alert("please input a later time in Time 2");
  }

  this.setState({
    countdown: difference
  })
}


start() {
  if(this.state.input1 === '' && this.state.input2 === ''){
    alert('please choose 2 times');
  }
  this.getDifference(this.state.input1, this.state.input2);
  this.start = setInterval((e) => {
    this.setState((prevState) => {
      return {countdown: prevState.countdown - 1};
    });
      if(this.state.countdown <= 0){
        clearInterval(this.start);
      }
  }, 1000);

}

stop(){
  clearInterval(this.start);
}

reset(){
  clearInterval(this.start);
  this.setState((prevState) => {
    return {countdown: null, input1: '', input2:''}
  })
}

  render() {
    return (
      <div className="App">
        <h1>Countdown Timer</h1>
        <p>Please choose two different times below</p>
          <div className="input1">
              <label>
                Time 1:
              <input type="time"
                  step="1"
                  min= "12:00"
                  max= "18:00"
                  value={this.state.input1}
                  onChange={(e)=> this.input1ContentChange(e)}/>
              </label>
          </div>
          <div className="input2">
              <label>
                Time 2:
              <input type="time"
                  step="1"
                  min="12:00"
                  max="18:00"
                  value={this.state.input2}
                  onChange={(e)=> this.input2ContentChange(e)}/>
              </label>
          </div>
          <button onClick={(e) => this.start()}>Start</button>
          <button onClick={(e) => this.stop()}>Stop</button>
          <button onClick={(e) => this.reset()}>Reset</button>
          <h3>{this.state.countdown}</h3>
        </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.start=this.start.bind（this）；
this.toTimestamp=this.toTimestamp.bind（this）；
this.getDifference=this.getDifference.bind（this）；
此.state={
输入1:“”，
输入2:“”，
倒计时：空
}
}
输入1内容更改（e）{
常量文本=e.target.value；
此.setState（（）=>{
返回{input1:text}；
})
}
输入2内容更改（e）{
常量文本=e.target.value；
此.setState（（）=>{
返回{input2:text}；
})
}
toTimestamp（输入）{
让time=input.split（“：”）；
设秒=（+时间[0]）*60*60+（+时间[1]）*60+（+时间[2]）；
返回秒数；
}
getDifference（输入1、输入2）{
让差=（this.toTimestamp（input2））-（this.toTimestamp（input1））；
if（this.toTimestamp（input2）{
this.setState（（prevState）=>{
返回{countdown:prevState.countdown-1}；
});
如果（这个状态）倒计时{
返回{倒计时：null，input1:''，input2:''}
})
}
render（）{
返回(
倒数计时器
请在下面选择两个不同的时间

时间1：
this.input1ContentChange（e）}/>
时间2：
this.input2ContentChange（e）}/>
this.start（）}>start
this.stop（）}>stop
this.reset（）}>reset
{此.状态.倒计时}
);
}
}
导出默认应用程序；

---

重新启动倒计时的开始函数出现错误。当我使用React扩展签入我的chrome工具时，状态管理良好。似乎“this”正在丢失。

您正在修改类函数。当您的应用加载时，您的类有一个

开始

方法，但在该方法中您可以：

this.start = setInterval(...)

setInterval

不返回函数，而是一个

id

，您可以稍后使用它来清除间隔。即使它确实返回函数，您也可能不希望在运行时修改类方法

我建议使用另一个变量名：

this.intervalId = setInterval(...)

---

一个潜在的问题是，你把你的时间间隔分配给一个名为“代码>”的值。开始< <代码>，同时已经有了一个名为“代码>开始/代码>绑定到<代码> > < <代码>的函数。你应该考虑选择更多的显式/有意义的名称，特别是不同的名称来消除冲突/意外变量重新分配的风险。完全没有。