反应 function state 未定义 no-undef

Question

I create this function startStop for such button to start and pause a timer. The error is "Line 108:22: 'sessionLength' is not defined no-undef" (line 108 is the last "this.setState()" in this code block) does it have to do anything with binding? what's wrong?

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

class App extends Component {
  state = {
    breakLength: 5,
    sessionLength: 25,
    timerState: "paused",
  }

  constructor(props) {
    super(props)
    this.startStop = this.startStop.bind(this)
  }

startStop() { 

    if (this.state.timerState === "paused") {
      this.setState({
        timerState: setInterval(() => decrement(), 1000)
      }, function () {console.log(this.state.timerState)})

    }
    
    else if (this.state.timerState !== "paused") {
      console.log(this.state.timerState)
      clearInterval(this.state.timerState)
      this.setState({
        timerState: "paused"
      }, function () {console.log(this.state.timerState)})
    }

    this.setState({
      sessionLength: sessionLength - remaining
    }, function () {console.log(this.state.sessionLength)})

  }

Answer 1

sessionLength is a member of this.state , so to access it you would need to use this.state.sessionLength .

    this.setState({
      sessionLength: this.state.sessionLength - remaining
    }

Answer 2

I think you should declare state inside the constructor

You try:

    constructor(props) {
     super(props)
     this.state = {
        breakLength: 5,
        sessionLength: 25,
        timerState: "paused",
     }
     this.startStop = this.startStop.bind(this)
    }