원인: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
언마운트된 컴포넌트는 상태 업데이트를 할 수 없다. 해당 작업은 수행하지 않지만 메모리 누수 발생
참고한 블로그의 상황과 같이 나도 리스트를 선택하고 그에 대한 데이터를 비동기 작업으로 가져오는데
그에 대한 상태를 loading (true -> false)으로 변경하고 있었다.
내가 처음에 생각한 에러 원인
네비게이션으로 내부 메뉴(리스트에서 항목 선택)로 들어갔다가 다시 메인 화면으로 돌아오는것은 마운트되지 않아서
메인 화면에 걸어놨던 업데이트 함수도 실행되지 않아 상태 업데이트가 안되는 것 같다.
블로그에서 예상한 에러 원인
로딩 상태를 관리하던 컴포넌트에서 네비게이션을 통해 이동한 상태이기 때문에 상태 변수를 관리할 수 없다는 에러라고 한다.
해결 방법 1.
로딩 상태 관리 컴포넌트에서 이동하기 전에 loading 상태를 false로 처리해주고 이동하기!
setLoading(true)
getData(()=>{
//do something
}).then(() =>
setLoading(false)
).then(()=>
return goBack()
)
해결 방법 2.
콘솔 에러에서 제시한 방법으로 useEffect의 cleanup function 적용하기!
useEffect(() => {
return () => setLoading(false)
}, [])근데 return 에 setLoading 상태 변경을 즉시 실행 함수로 넘겨주는 것이 왜 cleanup function 인지는 잘 이해 못하겠다.
해결:
아직 안해봄.
참고문서링크
❗️📚 에러노트 - Can't perform a React state update on an unmounted component
에러발생 리액트를 이용하여 모달 컴포넌트를 개발 하던중 다음과 같은 에러가 발생하였다. 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지
velog.io
'react native' 카테고리의 다른 글
| 22.02.27 useEffect 마운트, 언마운트, 업데이트 관리 (0) | 2022.03.10 |
|---|---|
| 22.03.01 navigation.navigate 타입 지정 (1) | 2022.03.01 |
| 22.02.05 useEffect안에서 useQuery 쓰고 싶을 때 (0) | 2022.02.05 |
| 22.01.25 [android] 로컬 서버 접속 for 로컬 디바이스 기기 (0) | 2022.02.05 |
| 22.01.25 [android] GC overhead limit exceeded (0) | 2022.01.25 |