Question

我有一个简单的倒计时组件，用户输入两次，它会减少它们之间的秒数。启动，停止和重置工作。除了，当我重置倒计时并输入两次新的时间（没有刷新页面）时，我遇到了这个错误：

TypeError: _this3.start is not a function

> 108 | <button onClick={(e) => this.start()}>Start</button>

以下是我的代码：

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;

错误发生在重启倒计时的启动功能中。当我使用React扩展程序检查我的chrome工具时，状态管理正常。似乎＆＃34;这＆＃34;迷路了。

Answer 1

您正在修改您的课程功能。当您的应用加载时，您的类有start方法，但在该方法中您可以执行以下操作：

this.start = setInterval(...)

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

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

this.intervalId = setInterval(...)

_this3不是一个函数（React）

1 个答案: