React.js Axios 통신 이후 setState 안먹힘 현상

Question

안녕하세요~리액트로 개발중인데 통신 후 setState이 진행되지 않았는데 잘못된 점을 잘 못 찾겠어서 선배님들의 도움 좀 받을 수 있을까 해서 올리게 되었습니다. 우선 Class Component 형이며, 현재 Component.class C_UserEssentialCheck extends Component { constructor(props){ super(props); this.state &#61; { user_lecture_linker_list : [] } this.requestLectureInfo &#61; this.requestLectureInfo.bind(this); this.requestLectureInfo(); } async requestLectureInfo(){ const AUTHORIZATION &#61; 'Bearer ' &#43; this.props.cur_session_id console.log(AUTHORIZATION) axios.defaults.headers.common['Authorization'] &#61; AUTHORIZATION // 식별을 위한 Path-Variable 요청 const response &#61; await axios.get( 'http://localhost:8080/urlurlurl~~/' &#43; this.props.cur_user.user.id , { headers:{ &#34;X-Requested-With&#34;:&#34;a&#34; } }, { withCredentials:true } ); console.log(response) // ********* response.data 에 Array 들어와 있는 것 확인 this.setState({ ///// ******** setState 이 안됩니다. user_lecture_linker_list : response.data }) debugger; // 여기서 this.state.user_lecture_linker_list 실행시 빈 array 반환 } 통신은 다 진행되는 모습이 확인됩니다. (console.log(response.data) 에서 확인 완료) 그 이후 constructor 에서 선언한 변수 list 에 대해서 setState 을 진행해주는데 여기서 이게 먹히지 않는 모습이 확인됩니다. (constructor 에서 .bind(this) 진행해줌) 제가 사용하는 setState 에서 잘못된 방향이 있는걸까요? 왜 안되는지 아무리 봐도 잘 모르겠습니다 ㅠㅠ 도움주실 수 있으신 선배님들 계시면 도움 주시면 감사하겠습니다 ㅠㅠ

반응콩 · Answer

거기서 debugger 거시고 보셔봤자 state 업데이트 된거 안보입니다.state 업데이트는 비동기라서요.

쓰로우내인생익셉션스 · Answer

답변주셔서 감사합니다.혹시 그러면 setState 를 동기적으로 실행후 진행시킬 수 있는 방법이 필요한 걸까요?

토끼왕 · Answer

setState 함수는 두번째 인자로 콜백함수를 받습니다. 이걸 사용하세요

쓰로우내인생익셉션스 · Answer

해당 경우 그렇다면 후속진행을 callback 으로 둬야 하는걸까요..? &#34;callback이 될때까지 진행하지 않는다&#34;를 어떻게 둬야 하는지...이후에 랜더 함수가 진행되었으면 좋겠는거라 ㅜㅜ

둠칫따당 · Answer

class component의 constructor에서는 this.setState호출 안해도 됩니다this.state&#61;블라블라;이렇게 하세요.constructor에서 호출하는 함수에서도 this.setState호출 안해도 됩니다그리고 this.setState를 promise로 감싸면 동기화 할 수 있습니다.

토끼왕 · Answer

해당 경우 그렇다면 후속진행을 callback 으로 둬야 하는걸까요..? &#34;callback이 될때까지 진행하지 않는다&#34;를 어떻게 둬야 하는지...이후에 랜더 함수가 진행되었으면 좋겠는거라 ㅜㅜ 이거는 잘못된 생각이며 리액트를 이렇게 사용하실거면 사용안하시는게 맞습니다.조금 더 나은 생각은 초기 상태로 렌더링 후 스테이트 변환이 완료되면 그 상태에 맞게 다시 렌더링을 한다 입니다

React.js Axios 통신 이후 setState 안먹힘 현상

6개의 답변

#state 목록