[React] Warning: Cannot update a component (`Unknown`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in ...

---

 

#1. Warning: Cannot update a component (`Unknown`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in..

 

이건 또 무슨 경고..

해석해보니 '알 수 없는' 컴포넌트를 렌더링 하는 동안 '알 수 없는' 컴포넌트를 업데이트할 수 없다고 하는데 ..

아니 에러 메세지에서 알 수 없다고 하면 어떻게 찾으라는 거지..

평소 크롬 개발자 도구 창을 띄워 놓고 에러 나면 바로바로 캐치할 수 있게 작업하는데 하필 이 에러가 발생할 때 닫아놓고 있었다..

에러도 아닌 것이 빨간색으로 떠가지고 보기 싫음 ..

 

결국 찾고 찾아서 에러가 난 부분을 찾았는데,

이미지 사용 여부를 boolean 값으로 자식 컴포넌트에서 부모 컴포넌트로 상태 값을 보내는 과정에서 위 에러가 발생하였다.

 

경고메세지도 빨간색이라서 싫음 ..

그에 따라 이미지를 업로드하면 에러가 발생했던 것이다.

 

해결방법

해결 방법은 의외로 간단하였다.

부모 컴포넌트로 보낼 값을 바로 보내지 않고,  imgConfirm 값이 변할 때 부모 컴포넌트로 값을 전달 할 수 있게 useEffect로 감싸주면 쉽게 해결 할 수 있었다.

 

더이상 에러메세지가 안뜨는 것을 볼 수 있다.

 

참고자료

https://stackoverflow.com/questions/62336340/cannot-update-a-component-while-rendering-a-different-component-warning

Cannot update a component while rendering a different component warning