_this3 不是函数（反应）答案

【问题标题】：_this3 not a function (React)_this3 不是函数（反应）
【发布时间】：2017-11-10 00:29:25
【问题描述】：

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

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 工具时，状态管理得很好。似乎“这个”正在丢失。

【问题讨论】：

我看到的一个潜在问题是，您将间隔分配给一个名为 this.start 的值，而已经有一个名为 start 的函数绑定到 this。您应该考虑选择更明确/更有意义的名称，尤其是不同的名称，以完全消除冲突/意外变量重新分配的风险。

标签： javascript reactjs countdown

【解决方案1】：

你正在修改你的类函数。当您的应用加载时，您的类有一个 start 方法，但在该方法中您可以：

this.start = setInterval(...)

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

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

this.intervalId = setInterval(...)

【讨论】：