문제의 경우 : 지연된 보드 addd 모달 쇼 플래그

다음 코드를 고려하십시오. React의 보드 addd 구성 요소를 구현하는 스 니펫 : class boardadd extends react.component { 생성자 (소품) { 슈퍼 (소품); this.state = { BoardDaddmodalshow : False }; this.openadddboardmodal = this.openaddboardmodal.bind (this); } OpenAdDdoardModal () { this.setState ({BoardDaddModalShow : true}); Console.log (this.state.boardddmodalshow); } }

OpenAddboardModal 메소드가 호출되면 BoardDaddModalShow 플래그를 True로 설정하고 그 값을 콘솔에 인쇄합니다. 그러나 콘솔 출력은 SetState 호출에도 불구하고 값이 거짓으로 유지됨을 보여줍니다. 그것을 호출 한 후에, UI는 RECT가 재 렌더를 예약 할 때까지 영향을받지 않습니다. Console.log 문은 재 렌더가 발생하기 전에 실행되어 구식 상태 값이 인쇄됩니다.

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의 인수로 사용할 수 있습니다. 콜백은 상태가 업데이트되고 재 렌더가 발생한 후 실행됩니다. this.setState ({BoardDaddModalShow : true}, function () { Console.log (this.state.boardddmodalshow); }); }

이 경우, Console.log 문은 상태가 업데이트 된 후에 실행됩니다.

이 Setstate의 비동기 특성은 성능 향상 목적을 제공합니다. 상태 업데이트가 재 렌즈를 트리거하므로 동기화되면 브라우저가 응답하지 않을 수 있습니다. SetState Call은 불필요한 재 렌즈를 최소화하고 사용자 경험을 향상시켜 성능을 향상시킵니다.