React：無法對未安裝的組件執行 React 狀態更新。 使用 `useLocation()` 時

Question

所以這是我的問題。 我有：

const nav = useHistory();
const location = useLocation();

有使用location來確定其類的 DOM。

<IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>

然后當我打電話時：

nav.push('/');

它產生錯誤：

index.js:1 警告：無法對卸載的組件執行 React 狀態更新。 這是一個空操作，但它表明您的應用程序中存在內存泄漏。 要修復，請取消 useEffect 清理函數中的所有訂閱和異步任務。

如果我跟蹤它，當我調用nav.push('/')時， useLocation()會改變。 這會觸發<IonItem>上的 DOM 更新以檢查className 。

我怎樣才能防止這種情況？

---

代碼

const Menu: React.FC = () => {
    
    const location = useLocation();
    const nav = useHistory();

    const logout = () => {
        nav.push('/');
    }

    return (
        <div>
            <h3 className={location.pathname === '/account' ? 'selected' : ''}>Title</h3>
            <button onClick={logout}>Logout</button>
        </div>
    )

}

export default Menu;

nav.push('/')會產生問題，因為它改變了觸發 DOM 更新的location 。

Answer 1

嘗試跟蹤已安裝組件的參考。

const Menu: React.FC = () => {
    
    const location = useLocation();
    const nav = useHistory();

    // Use a ref to maintain the mounted state across component re-renders 
    const mountedRef = useRef(false);

    // just for tracking mounted state
    useEffect(() => {
        mountedRef.current = true;
        return () => {
            mountedRef.current = false;  
        }
    }, [])

    const logout = () => {
        if(mountedRef.current) {
            nav.push('/');
        }
    }

    return (
        <div>
            <h3 className={location.pathname === '/account' ? 'selected' : ''}>Title</h3>
            <button onClick={logout}>Logout</button>
        </div>
    )

}

export default Menu;

來源： https : //www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/