Next.js中Layout组件的useEffect每次路由切换都触发该如何解决？

问题根因 #

你的Layout组件会在每次路由切换时重新挂载，所以哪怕useEffect设置了空依赖数组，也会在每次组件挂载时重新执行。通常这种情况是因为你把Layout作为页面级组件的包裹层，写在了每个独立的页面文件里，路由切换时页面整体重新渲染，Layout也跟着销毁重建。

解决方案 #

方案一：将Layout设置为全局包裹（最推荐）

Next.js中可以在根入口文件_app.js中统一包裹Layout，这样整个应用生命周期内Layout只会挂载一次，路由切换不会触发组件重建，对应的useEffect自然只会执行一次。
修改pages/_app.js代码如下：

import Layout from '../components/layout/Layout' // 替换成你实际的Layout文件路径

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

改完之后可以把各个页面里单独引用的Layout代码删掉即可。

方案二：加请求拦截判断，避免重复请求

如果你需要保留页面级Layout的写法，可以通过Redux中已有的用户数据状态判断是否需要发起请求：
首先在Layout组件里用useSelector拿到Redux中存储的userData，修改useEffect逻辑：

// 先从redux取已存储的用户数据，替换成你实际的redux状态路径
const userData = useSelector(state => state.auth.userData)

useEffect(() => {
  const { token } = cookie;
  // 只有存在token 且 还没有拉取到用户数据的时候才发起请求
  if (token && !userData) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    dispatch({ type: "IS_LOGGED_IN" });
    dispatch(getUserData(token));
  }
}, [cookie, userData]);

这样哪怕Layout重新挂载，只要已经拉取过用户数据，就不会重复发起请求。

内容的提问来源于stack exchange，提问作者Omar Atef