Question

我正在尝试使用axios在useEffect中获取数据，但每次更改页面时它都会获取数据。有没有一种方法可以在更改页面时不触发useEffect？我尝试使用披肩推式推杆，但没有用。我无法在服务器端获取数据，因为我在axios拦截器中使用了next / router。

   import { useRouter } from 'next/router';
   const router = useRouter();
   router.push('/', '/', { shallow: true })

使用上面的代码，它将在切换路由时触发useEffect。

  useEffect(() => {
    fetch.get('/endpoint').then(response => {
     // do stuff
    });
  }, []);

Answer 1

如果useEffect中有一些东西只想运行一次，请添加一个空数组作为依赖项数组。

示例：

  useEffect(() => {
      // your axios fetch here
  }, []);

空数组作为依赖项，意味着效果只运行一次。如果不指定依赖项，则效果将在每次渲染后运行。

Answer 2

尝试：

useEffect(() => {
    fetch.get('/endpoint').then(response => {
     // do stuff
    });
}, []); // the empty array will call useEffect only for first time while loading the component

引用：https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects请参见注释

Answer 3

浅路由仅适用于同一页面。参见this。
如果您坚持使用浅路由，则必须使用dynamic-routes将页面聚合为一页。

所以我认为最好在useEffect中使用一些缓存策略。

下一个js路由触发器useEffect

3 个答案: