如何修復「無法對未安裝的元件執行 React 狀態更新」錯誤？

辨識有問題的元件

瀏覽器控制台中提供的堆疊追蹤指示負責狀態更新衝突的元件。堆疊追蹤中的每一行代表一個函數調用，括號中提到了組件名稱或類別構造函數：

• in TextLayerInternal (由Context.Consumer 創建)
• in TextLayer (由PageInternal 創建）

這表示TextLayer元件正在嘗試更新其

解決狀態更新錯誤

要解決此問題，您應該在元件卸載之前驗證所有非同步操作是否已取消或完成在元件WillUnmount中。在您的情況下，這涉及處理可限制函數 setDivSizeThrottleable。

修訂後的代碼

在修訂後的 Book 組件中，您進行了以下更改：

• 使用以下方法將 setDivSizeThrottleableSizeThrottleable轉換為可取消函數
• 在componentWillUnmount中加入了清理函數，用於取消throttleable函數。

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中文網其他相關文章！