Блог

 import React from 'react';

class Add extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    componentDidMount() {
        console.log('componentDidMount called');
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate called');
    }

    increment() {

        this.setState(prevState => ({
            count: prevState.count   1
        }), () => {
            console.log('callback '   this.state.count)
        });

        console.log('not a callback '   this.state.count);
    }

    incrementFive() {
        this.increment();
        this.increment();
    }

    render() {
        console.log('render called');
        return (
            <div>
                <h2>count is {this.state.count}.</h2>
                <button onClick={() => this.incrementFive()}>Increment</button>
            </div>
        );
    }
}

export default Add;
 

нажмите Increment кнопку. журналы консоли:

 not a callback. count: 0
not a callback. count: 0
render called
componentDidUpdate called
callback. count: 2  //why is it 2 here instead of 1
callback. count: 2
 

Я ожидал:

 not a callback. count: 0
not a callback. count: 0
render called
componentDidUpdate called
callback. count: 1 
callback. count: 2 
 

Я понимаю setState , что ведет себя асинхронно, но я не мог понять, почему setState в обратном вызове выводится только значение конечного состояния. Если мы предоставляем обратный вызов, он выполняется сразу после обновления состояния. Здесь, когда мы нажимаем Increment кнопку , count значение равно 1, и обратный вызов должен был быть распечатан count: 1 , но я вижу, что он печатает только значение конечного состояния, т. Е. 2

setState выводит только конечное состояние, потому что вы не ждете асинхронного вызова setState , проверьте код ниже, который я использовал в режиме асинхронного ожидания

 async incrementFive() {
   await this.increment();
   await this.increment();
}
 

Теперь он выведет оба значения