為什麼我會收到「無法對已卸載的元件執行 React 狀態更新」錯誤？

理解「無法對已卸載的元件執行React 狀態更新」錯誤

當React 嘗試更新已卸載的元件的狀態時，會發生此錯誤已經從DOM 中卸載了。 React 為每個元件維護一個內部標誌，指示它目前是否已安裝。如果在卸載元件後觸發更新，React 會引發此錯誤以防止潛在的記憶體洩漏和其他不可預測的行為。

識別有問題的元件和事件

您的堆疊中提供的堆疊追蹤錯誤訊息包含可協助您識別有問題的元件和負責狀態更新的事件處理程序或生命週期掛鉤的訊息。在堆疊追蹤中尋找“組件”值，因為它應該包含組件的名稱。此外，觸發更新的特定事件處理程序或生命週期掛鉤通常可以從函數名稱或程式碼中的周圍上下文推斷出來。

解決問題

要解決該問題，您需要確保僅在組件仍掛載時才執行狀態更新。解決方法如下：

• 檢查isMounted 標誌： 在基於類別的元件中，您可以建立一個布林isMounted 標誌，並在componentWillUnmount 中將其設定為false 。在執行狀態更新之前，檢查 isMounted 是否為 true 以確保元件仍處於渲染狀態。

  class Component extends React.Component {
    componentWillUnmount() {
      this.isMounted = false;
    }
  
    someMethod() {
      if (this.isMounted) {
        this.setState({ ... });
      }
    }
  }

• 使用條件渲染： 在功能元件中，您可以使用條件渲染來防止在卸載元件後渲染該元件。使用包含 isMounted 標誌的相依性陣列將狀態更新包裝在 useEffect 掛鉤中。

  const Component = props => {
    const [isMounted, setIsMounted] = React.useState(true);
  
    useEffect(() => {
      return () => setIsMounted(false);
    }, []);
  
    if (!isMounted) return null;
  
    // State updates here...
  };

• 取消非同步函數： 如果狀態更新由以下條件觸發非同步操作，例如setTimeout 或fetch，記得在componentWillUnmount 生命週期鉤子或cleanup 函數中取消該操作useEffect 鉤子。這可以防止組件卸載後發生狀態更新。

  class Component extends React.Component {
    componentWillUnmount() {
      clearTimeout(this.timeoutId);
    }
  
    componentDidMount() {
      this.timeoutId = setTimeout(() => {
        this.setState({ ... });
      }, 1000);
    }
  }

以上是為什麼我會收到「無法對已卸載的元件執行 React 狀態更新」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！