задерживаемые обновления состояния в React: Понимание асинхронного SetState

При работе с компонентами React очень важно понять природу метода SetState. В отличие от императивного программирования, где обновления состояния происходят немедленно, Setstate React является асинхронным. Это означает, что обновление состояния не гарантирует немедленного размышления во внутреннем состоянии компонента.

] , рассматриваемый вопрос: задержка Boardadd Modal Show Flag

рассмотрим следующий код Фрагмент, который реализует компонент BoardADD в React:

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

SetState является асинхронным. После того, как он называется, пользовательский интерфейс остается незатронутым до тех пор, пока не планирует реагировать повторное рендеринг. Оператор Console.log выполняется до возникновения повторного разрешения, что приводит к печати устаревшему значению состояния. Мы можем использовать функцию обратного вызова в качестве аргумента для SetState. Обратный вызов выполняется после обновления штата, и повторный рендеринг произошел:

openadddboardmodal () { this.setState ({boardaddmodalshow: true}, function () { console.log (this.state.boardddmodalshow); }); }

В данном случае оператор Console.Log будет выполнен после обновления состояния, правильно показывая новое значение BoardAddmodalShow как true.

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}