React+Node.js前后端交互GET请求重复返回问题求助

1. React组件渲染阶段触发GET请求 #

如果你的GET请求直接写在组件渲染逻辑里（比如函数组件顶层代码、类组件的render方法内），而非放在useEffect（函数组件）或componentDidMount/componentDidUpdate（类组件）这类副作用钩子中，每次组件重渲染都会重复执行GET请求。示例：

// 错误写法：组件每次渲染都会发送GET请求
const App = () => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
  
  return <div>页面内容</div>
}

而POST请求通常绑定在用户交互事件（如按钮点击）中，仅在事件触发时执行，不会随组件渲染重复发送。

2. React严格模式的开发环境特性 #

默认Create React App项目会启用StrictMode，在开发环境中它会重复执行副作用函数两次，用于检测潜在的代码问题。如果你的GET请求放在useEffect但依赖数组设置不当（比如空数组依赖），就会触发两次请求：

// 开发环境下StrictMode会让该useEffect执行两次
useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
}, [])

生产环境下StrictMode不会有该行为，请求仅发送一次。

3. 组件被重复挂载或父组件频繁重渲染 #

若请求所在组件被包含在频繁重渲染的父组件中，且未做性能优化（比如用React.memo包裹组件），父组件每次重渲染都会导致子组件重新挂载/渲染，进而重复触发GET请求。

4. 浏览器预请求机制（少见） #

部分浏览器会对页面内可预测的GET请求做预加载，不过这种情况概率较低，多数问题还是源于代码逻辑层面。

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