'마운트 해제된 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다' 오류를 해결하는 방법은 무엇입니까?

마운트되지 않은 구성 요소에서 React State 업데이트를 수행할 수 없습니다

문제

React로 작업하는 동안 "Can't done a React state update on on 마운트 해제된 구성요소입니다." 이 오류는 일반적으로 DOM에서 구성 요소가 마운트 해제된 후 구성 요소의 상태를 업데이트하려고 할 때 발생합니다.

문제가 되는 구성 요소 식별

스택 추적에서, 마운트 해제된 후 setState(...)를 호출한 구성 요소를 찾기 위해 호출 스택을 역추적하여 오류를 담당하는 구성 요소를 식별할 수 있습니다. 문제가 있는 구성 요소는 스택 추적에 componentName.prototype.setState로 나열됩니다.

문제 해결

이 오류를 해결하려면 취할 수 있는 몇 가지 접근 방식이 있습니다. :

1. 비동기 작업 취소: 구성 요소에서 실행 중인 가져오기 또는 시간 초과와 같은 비동기 작업은 componentWillUnmount 메서드에서 취소됩니다. 이러한 작업은 구성 요소가 마운트 해제된 후에도 계속 실행되어 마운트 해제된 구성 요소에서 상태 업데이트가 발생할 수 있습니다.
2. 가드 상태 업데이트: 구성 요소가 다음과 같은지 확인하는 조건부 확인으로 상태 업데이트를 래핑합니다. 상태를 업데이트하기 전에 여전히 마운트되어 있습니다. 예:

if (this.isMounted) {
  this.setState({ ... });
}

3. React Hooks 사용: React Hooks를 사용하는 경우 useEffect 후크의 정리 기능을 사용하여 비동기 작업을 취소할 수 있습니다. 작업을 수행하고 마운트 플래그를 토글합니다. 이렇게 하면 구성 요소가 마운트되는 동안에만 상태 업데이트가 발생합니다.

예(React Hooks)

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    try {
      const data = await fetch('...');
      if (isMounted) setState(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

이러한 접근 방식 중 하나를 구현하면 "마운트 해제된 구성 요소에 대해 React 상태 업데이트를 수행할 수 없습니다" 오류를 방지하고 상태 관리가 구성 요소의 상태와 일치하는지 확인할 수 있습니다. 수명주기.

위 내용은 '마운트 해제된 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!