setState 비동기 다루기

1. 원인

setState가 이루어진 후, 모달창을 열게 하고 싶었는데 비동기로 처리되다 보니 모달창이 먼저 열리는 문제가 있었다.

 

2. 해결책

setState의 두번째 인자가 callback임을 이용해 해결했다.

첫 번째 setState에서 모달창의 내용을 세팅한 후, 콜백으로 모달창을 open하게 해 주었다.

코드는 다음과 같다.

onOpenModal = (projectId) => {
        let data = this.projectDataSet.find(item=>item["id"]===projectId)
        this.setState({
            modalContent: data
            },()=>{console.log("state change1",this.state) 
            this.setState({open:true},()=>{console.log("state change2",this.state)})});
    };