Почему функция не вызывается с первого раза?

Question

[Иван Иванов]

Добрый день, я только начинаю изучать React.js и пытался сделать таймер, так что не судите строго. У меня возникла такая проблема. При нажатии на кнопку "установить", вызывается функция setTimer(), которая должна устанавливать значение на циферблате, но значения устанавливают не с первого раза, я должен нажать еще один раз для успешной установки. Подскажите пожалуйста, как исправить эту ошибку.

Ссылка на песочницу

class App extends Component{

    constructor(){
        super();
        this.state = {
            sec: 0,
            finalSeconds: 0,
            finalMinutes: 0,
        };
    }

    setTimer(){
        let input = document.getElementById("input_timer").value;
        let param = parseInt(input);
        console.log(param);
        this.setState({
            sec: param,
        });
        this.countTime();
        console.log(this.state.sec);
    }

    runTimer(){
        let input = document.getElementById("input_timer").value;
        let param = parseInt(input);
        setTimeout(this.decrement.bind(this, param), 1);
    }

    decrement(data){
        console.log(data);
        this.setState({
            sec: data - 1,
        });
        console.log("cостояние секунды", this.state.sec);
        if(this.state.sec > 0) {
            setTimeout(this.decrement.bind(this, this.state.sec), 1000)
        }
        this.countTime();
    };

    countTime(){
        let secondsForVal = this.state.sec % 60;
        let minutesForVal = Math.floor(this.state.sec / 60);

        if(secondsForVal.toString().length < 2){
            secondsForVal = '0' + secondsForVal.toString();
        }
        if(minutesForVal.toString().length < 2){
            minutesForVal = '0' + minutesForVal.toString();
        }

        this.setState({
            finalSeconds: secondsForVal,
            finalMinutes: minutesForVal,
        });

    }

    render(){
        return(
            <div className="App">
                <div className="input_timer"><input type="text" className="input_value" id="input_timer"/></div>
                <div className="timer">
                    <div className="minutesBlock">{this.state.finalMinutes}:</div>
                    <div className="secondsBlock">{this.state.finalSeconds}</div>
                </div>
                <button onClick={this.runTimer.bind(this)}>Запустить</button>
                <button onClick={this.setTimer.bind(this)}>Установить</button>
            </div>
        );
    }
}

export default hot(module)(App);

Answer 1

[0xD34F]

Всё вызывается.

Обновление стейта производится не сразу же после вызова setState. Так что когда вы в методе setTimer последовательно вызываете методы setState и countTime, последний имеет дело со старым значением state.sec.

Как добиться желаемого поведения... Нужная вам информация есть в документации.