React中点击NavLink时如何重新加载/刷新API数据？

首先先修正你Data.js里的一个小问题：当前axios请求的回调里用的是data.slice(0,1)，这里的data是组件初始的空数组，根本拿不到接口返回的数据，应该改成使用响应结果的res.data：

axios.get('BASE-URL').then(res => setData(res.data.slice(0, 1)))

接下来针对你的需求，提供两种简单可行的实现方式：

方式一：监听路由/锚点变化触发重新请求 #

利用React Router v6提供的useLocation钩子，监听页面位置的变化（包括锚点#link的变化），每次变化时重新发起API请求：

1. 在Data.js中导入useLocation：

import { useLocation } from 'react-router-dom';

2. 获取location对象，并修改useEffect的依赖项，同时在请求前可以先清空数据：

const [data, setData] = useState([]);
const location = useLocation();

useEffect(() => {
  // 先清空现有数据
  setData([]);
  // 重新发起请求
  axios.get('BASE-URL').then(res => {
    setData(res.data.slice(0, 1));
  });
}, [location]); // 依赖location，每次位置变化都会执行

这样每次点击Navbar里的<Link to="#link">时，location的hash值变化，useEffect就会重新执行，实现清空数据并加载新数据的效果。

方式二：通过状态提升手动触发 #

如果你的导航操作不需要依赖路由变化，也可以把数据状态提升到父组件（比如MainPage），然后给Navbar传递一个触发刷新的函数：

1. 在MainPage.js中管理数据和刷新函数：

import { useState, useEffect } from 'react';
import Navbar from './Navbar';
import DataComponent from './Data';

export default function MainPage() {
  const [data, setData] = useState([]);

  const refreshData = () => {
    setData([]);
    axios.get('BASE-URL').then(res => {
      setData(res.data.slice(0, 1));
    });
  };

  useEffect(() => {
    refreshData();
  }, []);

  return (
    <>
      <Navbar onRefresh={refreshData} />
      <DataComponent data={data} />
    </>
  );
}

2. 修改Navbar.js，点击Link时调用传递过来的刷新函数：

export default function Navbar({ onRefresh }) {
  return (
    <>
      <ul>
        <li>
          <Link 
            to="#link" 
            onClick={() => {
              // 点击时触发刷新
              onRefresh();
            }}
          >
            link
          </Link>
        </li>
      </ul>
    </>
  );
}

3. Data.js改成接收props的纯展示组件：

export default function DataComponent({ data }) {
  // 这里直接使用传入的data即可
  // ...
}

两种方式里，方式一更贴合你用React Router Link的场景，推荐优先尝试。

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