reactの遅延状態の更新：非同期setState

reactコンポーネントを操作する場合、セットステート法の性質を理解することが重要です。状態の更新がすぐに発生する命令プログラミングとは対照的に、Reactのセットステートは非同期です。これは、状態を更新しても、コンポーネントの内部状態に即座に反映されないことを意味します。 Reactでボードアドコンポーネントを実装するスニペット：

class boardAdd extends React.comPonent { コンストラクター（小道具）{ スーパー（小道具）; this.state = { BoardAddModalshow：false }; this.openaddboardmodal = this.openaddboardmodal.bind（this）; } OpenAddBoardModal（）{ this.setState（{boardDmodalshow：true}）; console.log（this.state.boardaddmodalshow）; } } openAddboardModalメソッドが呼び出されたら、BoardAddModalshowフラグをTrueに設定し、その価値をコンソールに印刷します。ただし、コンソール出力は、SetStateコールにもかかわらず値が誤ったままであることを示しています。それが呼び出された後、UIはReactが再レンダーをスケジュールするまで影響を受けません。 console.logステートメントは再レンダーが発生する前に実行され、時代遅れの状態値が印刷されます。 setStateの引数としてコールバック関数を使用できます。状態が更新され、再レンダーが発生した後にコールバックが実行されます。 this.setState（{boardaddmodalshow：true}、function（）{ console.log（this.state.boardaddmodalshow）; }）; }

この場合、Console.logステートメントは州が更新された後に実行され、BoardAddModalshowの新しい値を真実として正しく示します。

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);
    }
}