javascript - 倒计时功能，用setInterval设置每秒重设状态，报错this.setState is not a function

问题描述

问 题

import React from 'react';
import styles from './style/style.css'

let secondsToHms = (d) =>{
    d = parseInt(d);
    let h = Math.floor(d / 3600);
    let m = Math.floor(d % 3600 / 60);
    let s = Math.floor(d % 3600 % 60);
    return (
        (h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s
    )
}

class Timer extends React.Component {
    constructor(...args){
        super(...args);
        this.state = {
            sessionName:'work',
            timeLeft:25,
        }
    }
    toggleTimer(){
        let timeNumber = this.state.timeLeft;
        let secs = 60 * timeNumber;
        setInterval(updateTime,1000);

        function updateTime(){
            this.setState({               //就是这里报错，想要正确的倒计
                timeLeft:secondsToHms(secs),//时效果应该怎么做
            });
            secs--;
        }
        
    }
    render() {
        return (
            <section onClick={this.toggleTimer.bind(this)}>
                <div className={styles.timer}>
                    <p className={styles.title}>{this.state.sessionName}</p>
                    <p className={styles.times}>{this.state.timeLeft}</p>
                </div>
            </section>
        )
    }
}


export default Timer;

解决方案

要绑定this（敲黑板）!

箭头函数：

const updateTime = () => {};
setInterval(updateTime,1000);

别名：

const self = this;
function updateTime(){ self.setState({...}) }
setInterval(updateTime,1000);

这篇关于javascript - 倒计时功能，用setInterval设置每秒重设状态，报错this.setState is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！