Next.js页面刷新后无法获取API数据，求助排查原因

我正在开发一个使用条件渲染的项目，遇到异常问题：页面首次加载时能正常获取API数据，但刷新页面后就无法获取数据了。

• 首次加载页面：首次加载截图
• 页面刷新后：刷新后截图

这显然不符合预期，以下是我的请求代码：

useEffect(() => {
  axios
    .get(path)
    .then((res) => {
      setRoundData(res.data[1]);
      setStudentData(res.data[2]);
      setFilterData(res.data[2]);
    })
    .catch((err) => console.log(err));
}, [path]);

可能的原因及解决思路 #

1. path变量刷新后值异常 #

刷新页面后，path可能未正确初始化（比如依赖的路由参数、本地存储内容还没加载完成），导致useEffect未触发或请求了错误地址。

• 排查：在useEffect开头加console.log('当前path:', path)，刷新后查看控制台输出是否符合预期。
• 解决：若path依赖路由参数，确保路由参数在组件挂载时已就绪；若依赖异步初始化数据，等数据加载完成后再触发请求。

2. API返回数据结构刷新后变化 #

首次加载和刷新时，API返回的res.data结构可能不一致，比如刷新后res.data长度不足3，取res.data[1]或res.data[2]得到undefined，导致状态未更新。

• 排查：在then回调里加console.log('接口返回数据:', res.data)，对比首次加载和刷新后的输出差异。
• 解决：添加数据结构校验，避免无效赋值：

.then((res) => {
  if (Array.isArray(res.data) && res.data.length >= 3) {
    setRoundData(res.data[1]);
    setStudentData(res.data[2]);
    setFilterData(res.data[2]);
  } else {
    console.error('接口返回数据结构不符合预期:', res.data);
  }
})

3. 条件渲染导致组件未挂载 #

如果组件是通过条件渲染显示的，刷新后渲染条件可能不满足，组件未挂载则useEffect不会执行请求逻辑。

• 排查：刷新后检查组件是否被渲染到DOM中，确认渲染条件的依赖状态是否正确。
• 解决：确保刷新后组件的渲染条件依然成立，或将请求逻辑移至更高层级、始终挂载的组件中。

4. 请求出现权限/缓存/跨域问题 #

刷新后可能出现权限失效（如token丢失）、请求被缓存或跨域错误，但当前catch仅打印简单错误信息，可能遗漏关键细节。

• 排查：打开浏览器控制台「网络」标签，查看刷新后的请求状态码；同时修改catch打印完整错误：console.log('请求错误:', err.response || err)。
• 解决：若为权限问题，确保刷新后token已正确加载；若为缓存问题，给请求加时间戳禁用缓存：axios.get(${path}?t=${Date.now()})。

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