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

문제가 있는 구성 요소 식별

브라우저 콘솔에 제공된 스택 추적은 상태 업데이트 위반을 담당하는 구성 요소를 나타냅니다. 스택 추적의 각 행은 대괄호 안에 언급된 구성 요소 이름 또는 클래스 생성자를 사용하여 함수 호출을 나타냅니다.

• in TextLayerInternal(Context.Consumer에서 생성)
• in TextLayer( PageInternal에서 생성됨)

이는 TextLayer 구성 요소가 이후에 상태를 업데이트하려고 시도하고 있음을 나타냅니다. 마운트 해제되었습니다.

상태 업데이트 오류 해결

문제를 해결하려면 구성 요소가 컴포넌트WillUnmount에서 마운트 해제되기 전에 모든 비동기 작업이 취소되거나 완료되었는지 확인해야 합니다. 귀하의 경우에는 조절 가능 함수 setDivSizeThrottleable을 처리하는 작업이 포함됩니다.

수정된 코드

수정된 Book 구성 요소에서 다음과 같이 변경했습니다.

• 다음을 사용하여 setDivSizeThrottleable을 취소 가능한 함수로 변환했습니다. throttle.cancel().
• throttleable 기능을 취소하기 위해 componentWillUnmount에 정리 기능을 추가했습니다.

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

throttleable 기능 취소를 올바르게 처리하면 상태 업데이트 위반을 확인하고 "마운트 해제된 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다" 오류를 해결하세요.

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