反应在现有状态转换期间无法更新

Question

我安装了带有React-Countdown-Circle-Timer的React应用。当循环计时器的onComplete（）方法触发时，我正在设置状态，但收到以下警告：Warning: Cannot update during an existing state transition (such as within 'render').

import React from 'react';
import { CountdownCircleTimer } from 'react-countdown-circle-timer';

export default class Test extends React.Component {

    constructor() {
        super();
        this.state = {
            userMustWait: false
        }
    }

    render() {
        return (
            <CountdownCircleTimer
                isPlaying
                durationSeconds={3}
                colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
                onComplete={() => { this.setState({ userMustWait: false }) }}
            />)
    }
}

Answer 1

您必须编写函数而不是在渲染本身中做

onclick(){
   this.setState({ userMustWait: false })    
}

render() {
        return (
            <CountdownCircleTimer
                isPlaying
                durationSeconds={3}
                colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
                onComplete={() => this.onclick()}
            />)
    }