使用Next.js点击按钮发送Post与Get请求时遭遇304状态码无限循环问题求助

看起来你遇到的问题核心在于请求时序混乱、浏览器缓存干扰，再加上函数依赖处理不当，最终形成了无限循环。我来一步步帮你拆解解决：

1. 先修复请求时序：确保POST完成后再发起GET #

你当前的代码里POST和GET是并行发起的——评论还没提交到服务器，GET请求就已经发送了，拿到的还是旧数据。如果后续有依赖评论状态的逻辑，很容易触发重复请求。

把GET请求放到POST的then回调里，确保只有当POST成功提交后，才去获取最新的评论列表：

const addCommentHandler = (commentData) => { 
  axios({ 
    url: `/api/comment/${eventId}`, 
    method: "post", 
    data: commentData, 
    headers: { "Content-type": "application/json", }, 
  })
  .then((postRes) => { 
    console.log('评论提交成功:', postRes.data);
    // 仅在POST成功后，发起GET请求获取最新列表
    return axios({ 
      url: `/api/comment/${eventId}`, 
      method: "get", 
    });
  })
  .then((getRes) => { 
    setComments(getRes.data.comments); 
  })
  .catch((err) => {
    // 别忘了处理错误，避免失败后无反馈
    console.error('评论操作失败:', err);
  }); 
}; 

2. 解决304缓存问题：禁用GET请求的浏览器缓存 #

304状态码表示浏览器在使用本地缓存内容，这意味着你拿到的可能不是最新评论，而且如果组件因状态变化不断发起GET请求，就会陷入循环。

你可以通过两种方式禁用缓存：

方式一：添加时间戳参数 #

给GET请求URL加一个唯一时间戳，让浏览器认为每次都是新请求：

axios({ 
  url: `/api/comment/${eventId}`, 
  method: "get", 
  params: { t: Date.now() } // 时间戳确保URL唯一，绕过缓存
})

方式二：设置请求头禁用缓存 #

直接在请求头里告诉浏览器不要使用缓存：

axios({ 
  url: `/api/comment/${eventId}`, 
  method: "get", 
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  }
})

3. 优化函数依赖：避免不必要的重复执行 #

如果addCommentHandler在组件内部定义，每次组件渲染时都会重新创建这个函数。如果useEffect依赖处理不当，会导致useEffect重复执行，进而触发重复请求。

用useCallback包裹函数，并声明正确的依赖项，确保函数仅在依赖变化时重新创建：

import { useCallback } from 'react';

// ...

const addCommentHandler = useCallback((commentData) => { 
  axios({ 
    url: `/api/comment/${eventId}`, 
    method: "post", 
    data: commentData, 
    headers: { "Content-type": "application/json", }, 
  })
  .then((postRes) => { 
    console.log('评论提交成功:', postRes.data);
    return axios({ 
      url: `/api/comment/${eventId}`, 
      method: "get", 
      params: { t: Date.now() }
    });
  })
  .then((getRes) => { 
    setComments(getRes.data.comments); 
  })
  .catch((err) => {
    console.error('评论操作失败:', err);
  }); 
}, [eventId, setComments]); // 依赖eventId和setComments，确保变化时更新函数

useEffect(() => { 
  addCommentHandler(); 
}, [addCommentHandler]); // 依赖addCommentHandler，确保函数更新时执行

最后检查：有没有其他循环触发点 #

还要确认组件里有没有其他useEffect或逻辑在监听comments变化，比如类似这样的代码：

useEffect(() => {
  // 发起GET请求获取评论
}, [comments]);

这会导致setComments更新状态后，又触发这个useEffect发起GET请求，形成无限循环。如果有这种情况，要去掉不必要的依赖或调整逻辑。

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