React：在构造函数上绑定方法时，在setState中实现定时器、状态属性未定义

Question

下面是组件&提前感谢您：

import React, { Component } from 'react';
import { connect } from "react-redux";

class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 }
        this.intervalHandle;
    }

//Component receives this.props.started === true properly
    componentDidMount() {
        if (this.props.started) {
            this.startTimer();
        }
    }
//startTimer triggers correctly logging "STARTING" 
    startTimer() {
        console.log("STARTING")
        this.intervalHandle = setInterval(
            this.tick, 1000);
    }
//tick also triggers correctly logging "Ticking" every 1000ms
    tick() {
        console.log("TICKING")
//HERE IS THE ERROR: Uncaught TypeError: Cannot read property
//'seconds' of undefined, the console throws it once a seconds
        this.setState({ seconds: this.state.seconds + 1 })
    }
    componentWillUnmount() {
        if (!this.props.started) {
            clearInterval(this.intervalHandle);
        }
    }
// Component initialy renders
    render() {
        return <span>:0{this.state.seconds}</span>
    }
}
function mapStateToProps(state) {
    return {
        started: state.isStarted
    }
}
export default connect(mapStateToProps)(Timer);

Answer 1

未定义它的原因是因为this.tick是一个函数，您没有绑定它。

将其更改为

 this.intervalHandle = setInterval(this.tick.bind(this), 1000);

或将其绑定在构造函数中

 constructor(props){
       super(props);
       this.tick = this.tick.bind(this);
  }

 this.intervalHandle = setInterval(this.tick, 1000);

 this.intervalHandle = setInterval(() => this.tick(), 1000);

 tick = () => {
    console.log("TICKING")
    this.setState({ seconds: this.state.seconds + 1 })
}