为什么这个回调在 React 中没有被记住？

Question

我有一个 Next.js 项目，其中包含以下代码：

_app.tsx

为什么每次更新路由都会触发4次console.log？我怎样才能让它只触发一次？

Answer 1

const Root = ({ Component, pageProps }) => {

  ...

  const handleHistoryChange = useCallback((url) => {
    console.log({ url });
  }, []);

  useEffect(() => {
    router.events.on('beforeHistoryChange', (url) => {
      handleHistoryChange(url);
    });

    return () => {
      router.events.off('beforeHistoryChange', handleHistoryChange);
    };
  }, [router.events, handleHistoryChange]);
}

的依赖项时都要绑定：

useEffect

。只需从 useEffect 中删除依赖项，您的事件应该仅在每个

[router.events, handleHistoryChange]

事件中触发一次。

beforeHistoryChange