在反應中切換路由時如何刪除事件偵聽器？

Question

在反應中切換路由時，有沒有辦法刪除事件偵聽器？ 我的路由器交換機看起來像這樣：

<Switch>
            <Route exact path="/" render={() => <Menu setLang={setLang} />}></Route>
            <Route path="/gallery">
              <Gallery />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/contact">
              <Contact />
            </Route>
          </Switch>

在我的 Menu 組件中，我有一個 useEffect 運行我的函數，該函數管理我的導航欄更短或更長，如果沒有空間，則將導航欄項目放在下拉列表中。

useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);

問題是這個導航欄只在我的菜單組件中，所以當我切換到不同的路由並調整窗口大小時，我收到錯誤，因為我的函數 manageCategoriesNav() 使用 querySelector 來捕獲僅在菜單組件中的項目。 有辦法解決嗎？

Answer 1

是的，效果可以為這個確切的用例返回一個回調！

您可以將removeEventListener包裝在函數調用中，如下所示：

useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    return () => window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);

然后反應將調用回調，並因此在調用函數時刪除事件。

此外，您實際上並不需要創建回調，因為manageCategoriesNav已經是一個函數，因此您只需編寫：

useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', manageCategoriesNav);
    return () => window.removeEventListener('resize', manageCategoriesNav);
  }, [state.lang]);

我也不是 100% 確定state.lang是您useEffect的正確輸入！

在官方反應文檔https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1 中閱讀更多相關信息

Answer 2

使用return關鍵字刪除事件。 該方法在組件卸載時調用，因此當您更改路由時。

useEffect(() => {
    manageCategoriesNav();
    window.addEventListener('resize', () => manageCategoriesNav());
    return () =>  window.removeEventListener('resize', () => manageCategoriesNav());
  }, [state.lang]);