如何解決此警告：“React Hook useEffect 缺少依賴項：'history'”？

Question

當我在我的 React 應用程序中使用 ScrollToTop 組件時，我在瀏覽器中收到以下警告：

第 12:6 行：React Hook useEffect 缺少依賴項：'history'。 要么包含它，要么移除依賴數組 react-hooks/exhaustive-deps

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

我可以進行哪些更改來刪除此警告？ 謝謝！

Answer 1

您可以將history添加到useEffect()塊的依賴項列表中：

useEffect(() => {
  const unlisten = history.listen(() => {
    window.scrollTo(0, 0);
  });
  return () => {
    unlisten();
  }
}, [history]); // <- add history here

或者您可以導入history而不是將其作為道具傳遞，然后避免將其包含在useEffect()依賴項中。

Answer 2

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, [history]);

  return (null);
}

export default withRouter(ScrollToTop);

將history添加到作為useEffect掛鈎 function 的第二個參數的數組中。 這樣一來，每當history發生變化時，都會調用unlisten 。

Answer 3

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, [history]); // <= you need this

  return (null);
}

export default withRouter(ScrollToTop);

API： https://reactjs.org/docs/hooks-effect.html示例：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

在上面的示例中，我們將 [count] 作為第二個參數傳遞。 這是什么意思？ 如果 count 是 5，然后我們的組件重新渲染 count 仍然等於 5，React 將比較前一次渲染的 [5] 和下一次渲染的 [5]。 因為數組中的所有項都是相同的（5 === 5），所以 React 會跳過這個效果。 這就是我們的優化。