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

에러메세지

Warning: Cannot update a component (`A : BrowserRouter`) while rendering a different component (`B : 컴포넌트이름`).

To locate the bad setState() call inside ` 컴포넌트이름 `, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Bug: too hard to fix "Cannot update a component from inside the function body of a different component." · Issue #18178 · face

 

A 컴포넌트를 변경할 때 B 컴포넌트를 업데이트 할 수 없다는 내용

리액트 깃허브 사이트 안에 들어가면 에러가 어디서났는지 알수있도록 설명해주고있다.

 

• 렌더링하는 동안 setState를 사용하면 안 된다.
• 해당 함수 구성 요소 본문은 본질적으로 클래스 구성 요소 렌더링 메서드와 동일함

즉 이 경고 메세지는 규칙이 변경된 것이 아니고 규칙을 지킬 수 있도록 이전에 하지않던 경고를 주는 것

 

해결

에러가 나는 해당 컴포넌트의 경우는, 초기에 Data가 있는지 확인하는 함수를 호출하는것에 안에 navigate를 호출하는게 있다.

초기 렌더링 혹은 추후에 실행할 모든 렌더링 과정에서 navigate를 호출했다

메타에서 말한 "렌더링 중에는 상태설정자를 호출하지마시오." 의 상태에 해당하여 경고가 나타났던 것이다.

 

useEffect로 래핑 하는게 좋다고 하기에 useEffect()=>{data있는지 확인하는 함수 호출() },[])로 빈댑스로 래핑했더니 경고 문구가 사라졌다.