Javascript 类组件抛出错误'；TypeError:无法分解属性'；timerTime'；属于'；本州'；因为它是未定义的'；

我在这里抛出了一个错误，我认为这与范围有关。它不喜欢状态（在顶部定义）和非结构化状态（在渲染中）的通信方式。你能看到什么？错误内容为：TypeError:无法对“this.State”的属性“timerTime”进行分解，因为它未定义

import React, { Component } from 'react'

// this was sources from: https://medium.com/@peterjd42/building-timers-in-react-stopwatch-and-countdown-bc06486560a2

export default class Countdown extends Component {
  state = {
    timerOn: false,
    timerStart: 0,
    timerTime: 0
  }

  startTimer = () => {
    this.state({
      timerOn: true,
      timerStart: this.state.timerTime,
      timerTime: this.state.timerTime
    })
    this.timer = setInterval(() => {
      const newTime = this.state.timerTime - 10
      if (newTime >= 0) {
        this.setState({
          timerTime: newTime
        })
      } else {
        clearInterval(this.timer)
        this.setState({ timerOn: false })
        alert("Countdown ended")
      }
    }, 10)
  }

  stopTimer = () => {
    clearInterval(this.timer)
    this.setState({timerOn: false})
  }

  resetTimer = () => {
    if (this.state.timerOn === false) {
      this.setState({
        timerTime: this.state.timerStart
      })
    }
  }

  adjustTimer = input => {
    const { timerTime, timerOn } = this.state
    const max = 216000000
    if (!timerOn) {
      if (input === 'incHours' && timerTime + 3600000 < max) {
        this.setState({timerTime: timerTime + 3600000})
      } else if (input === 'decHours' && timerTime - 3600000 >= 0) {
        this.setState({ timerTime: timerTime - 3600000 })
      } else if (input === 'incMinutes' && timerTime + 60000 < max) {
        this.setState({timerTime: timerTime + 60000})
      } else if (input === 'decMinutes' && timerTime - 60000 >= 0) {
        this.setState({timerTime: timerTime - 60000})
      } else if (input === 'incSeconds' && timerTime + 1000 < max) {
        this.setState({timerTime: timerTime + 1000})
      } else if (input === 'decSeconds' && timerTime - 1000 >= 0) {
        this.setState({timerTime: timerTime - 1000})
      }
    }
  }


  render() {
    const { timerTime, timerStart, timerOn } = this.State;
    let seconds = ('0' + (Math.floor((timerTime / 1000) % 60) % 60)).slice(-2)
    let minutes = ('0' + (Math.floor((timerTime / 60000) % 60))).slice(-2)
    let hours = ('0' + (Math.floor((timerTime / 3600000) % 60))).slice(-2)

    return (
      <div className='countdown'>
        <div className='countdown-header'>
          <div className='countdown-label'>Hours : Minutes : Seconds</div>
          <div className='countdown-display'>
            <button onClick={() => this.adjustTimer('incHours')}>&#8679;</button>
            <button onClick={() => this.adjustTimer('incMinutes')}>&#8679;</button>
            <button onClick={() => this.adjustTimer('incSeconds')}>&#8679;</button>
            <div className='countdown-time'>{hours} : {minutes} : {seconds}</div>
            <button onClick={() => this.adjustTimer('decHours')}>&#8681;</button>
            <button onClick={() => this.adjustTimer('decMinutes')}>&#8681;</button>
            <button onClick={() => this.adjustTimer('decSeconds')}>&#8681;</button>
          </div>
          {timerOn === false && (timerStart === 0 || timerTime === timerStart) && (<button onClick={this.startTimer}>Start</button>)}
          {timerOn === true && (timerStart >= 1000 && (<button onClick={this.stopTimer}>Stop</button>))}
          {timerOn === false && (timerStart !== 0 && timerStart !== timerTime && timerTime !== 0) && (<button onClick={this.startTimer}>Resume</button>)}
          {(timerOn === false || timerTime < 1000) && (timerStart !== timerTime && timerStart > 0) && (<button onClick={this.resetTimer}>Reset</button>)}
        </div>
      </div>
    )
  }
}

import React，{Component}来自“React”
//这是来自：https://medium.com/@peterjd42/建筑计时器-in-react-stopwatch-and-countdown-bc06486560a2
导出默认类倒计时扩展组件{
状态={
蒂梅隆：错，
timerStart:0，
时间：0
}
startTimer=（）=>{
这个州({
泰米隆：没错，
timerStart:this.state.timerTime，
timerTime:this.state.timerTime
})
this.timer=setInterval（（）=>{
const newTime=this.state.timerTime-10
如果（新时间>=0）{
这是我的国家({
时间时间：新时间
})
}否则{
clearInterval（这个.timer）
this.setState（{timerOn:false}）
警报（“倒计时结束”）
}
}, 10)
}
停止计时器=（）=>{
clearInterval（这个.timer）
this.setState（{timerOn:false}）
}
重置计时器=（）=>{
if（this.state.timerOn==false）{
这是我的国家({
timerTime:this.state.timerStart
})
}
}
调整定时器=输入=>{
const{timerTime，timerOn}=this.state
常量最大值=21600000
如果（！timerOn）{
如果（输入=='incHours'&&timerTime+3600000<最大值）{
this.setState（{timerTime:timerTime+3600000}）
}else if（输入=='decHours'&&timerTime-3600000>=0）{
this.setState（{timerTime:timerTime-3600000}）
}否则如果（输入=='incMinutes'&&timerTime+60000<最大值）{
this.setState（{timerTime:timerTime+60000}）
}else if（输入=='decMinutes'&&timerTime-60000>=0）{
this.setState（{timerTime:timerTime-60000}）
}否则如果（输入=='incSeconds'&&timerTime+1000<最大值）{
this.setState（{timerTime:timerTime+1000}）
}else if（输入=='decsonds'&&timerTime-1000>=0）{
this.setState（{timerTime:timerTime-1000}）
}
}
}
render（）{
const{timerTime，timerStart，timerOn}=this.State；
让秒=（'0'+（数学地板（（timerTime/1000）%60）%60））.slice（-2）
让分钟=（'0'+（数学地板（（时间时间/60000）%60））.slice（-2）
让小时数=（'0'+（Math.floor（（timerTime/3600000）%60））.slice（-2）
返回(
小时：分：秒
这个.adjustTimer（'incHours'）}>和#8679；
这个.adjustTimer（'incMinutes'）}>和#8679；
这个.adjustTimer（'incSeconds'）}>和#8679；
{小时}:{分钟}:{秒}
这个.adjustTimer（'decHours'）}>和#8681；
这个.adjustTimer（'decmins'）}>和#8681；
这个.adjustTimer（'decsonds'）}>和#8681；
{timerOn==false&&（timerStart==0 | | timerTime==timerStart）&&（Start）}
{timerOn==true&&（timerStart>=1000&&（Stop））}
{timerOn==false&&（timerStart！==0&&timerStart！==timerTime&&timerTime！==0）&（Resume）}
{（timerOn==false | | timerTime<1000）&&（timerStart！==timerTime&&timerStart>0）&（Reset）}
)
}
}

---

谢谢你的帮助

你有一个打字错误。Javascript区分大小写，因此它应该是

this.state

而不是

this.state

试试这个：

const { timerTime, timerStart, timerOn } = this.state;

---

非常感谢你！我知道它一定很小。@Andy F如果它解决了你的问题，你介意把它作为答案吗？谢谢你！再次感谢。嘿，你看过react文档中定义类和如何初始化状态了吗？我认为这是一个很好的开始。