Javascript Next.js useEffect 与 axios 和 router.query 在更改链接时返回旧数据

我正在处理一个Next.js项目，其中有一个使用axios和useEffect钩子获取数据的组件.基于router.query对象来获取数据以实现动态路由.然而，我面临的问题是，更改链接不会更新获取的数据，它会返回前router.query中的旧数据.

以下是我的代码的简化版本:

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';

const MyComponent = () => {
  const router = useRouter();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`/api/data/${router.query.id}`);
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    return () => {
      // Optional cleanup function if needed
    };
  }, [router.query]);

  return (
    <div>
      {/* Render data here */}
    </div>
  );
};

export default MyComponent;

为了解决这个问题，当useEffect使用新的router.Query值运行时，我try 使用AbortController取消上一次提取.然而，这种方法似乎并没有解决问题，我仍然从前面的查询中获得过时的数据.

以下是try 的代码:

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';

const MyComponent = () => {
  const router = useRouter();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const abortController = new AbortController();

      try {
        const response = await axios.get(`/api/data/${router.query.id}`, {
          signal: abortController.signal,
        });
        setData(response.data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Error fetching data:', error);
        }
      }
    };

    fetchData();

    return () => {
      abortController.abort();
    };
  }, [router.query]);

  return (
    <div>
      {/* Render data here */}
    </div>
  );
};

export default MyComponent;