ErrorNote) Warning: Can't perform a React state update on an unmounted component. [useEffect cleanup function]

Warning: 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.

경고 : 마운트 해제 된 구성 요소에서 반응 상태 업데이트를 수행 할 수 없습니다.
이것은 작동하지 않지만 응용 프로그램의 메모리 누수를 나타냅니다. 수정하려면 useEffect
정리 기능에서 모든 구독 및 비동기 작업을 취소하십시오.

  useEffect(() => {
    axios.post("/api/like/get-like-state", variable).then((res) => {
      if (res.data.success && res.data.liked) {
        setLiked(res.data.liked);
      }
    });
  }, [variable]);

useEffect가 실행되는 최적의 장수에 따라 마운트된 값이 true로 설정되면 정리 기능이 false로 변경됩니다. 낱개 구성품이 ummounted와 마운트된 값이 false일 내역이 삭제되었습니다.mounted가 탑재된 값이 true(비동기) 날짜 업데이트가 진행됩니다.

useEffect(() => {
    let mounted = true;
    // 좋아요 상태 가져오기
    axios.post("/api/like/get-like-state", variable).then((res) => {
      if (res.data.success && res.data.liked && mounted) {
        setLiked(res.data.liked);
      }
    });

    // clean-up
    return () => (mounted = false);
  }, [variable]);
const Example = (props) => {
  const unmounted = useRef(false);
  useEffect(() => {
    return () => { unmounted.current = true }
  }, []);

  const setFilter = () => {
    // ...
    props.dispatch(fetchCourses()).then(() => {
      if (!unmounted.current) {
        setLoading(false);
      }
    })
  }

  // ...
  return (
    <ReactTable onFetchData={setFilter} /* other props omitted */ />
  );
}

좋은 웹페이지 즐겨찾기