Reactjs中console.log语句被执行两次问题求助

这个问题是React 18+ 开发环境下*严格模式（Strict Mode）*的默认行为导致的。为了帮助开发者快速发现副作用未清理的问题，开发环境下严格模式会让组件挂载、副作用执行两次，生产环境下该行为会自动关闭，不会影响线上效果。
你当前的代码直接在组件顶层调用fetchTasks()，组件每挂载一次就会执行一次，严格模式下两次挂载自然触发两次打印。

解决方案 #

• 方案1（推荐）：将请求放入useEffect并添加请求中断逻辑
  按照React规范，网络请求这类副作用需要放到useEffect中管理，同时添加清理函数终止第一次多余的请求：

import { useEffect } from 'react'

// 组件内部代码
useEffect(() => {
  // 创建中断控制器，用于终止多余请求
  const controller = new AbortController()

  const fetchTasks = async () => {
    try {
      const res = await fetch('http://localhost:5000/tasks', {
        signal: controller.signal
      })
      const data = await res.json()
      console.log("data", data)
    } catch (err) {
      // 忽略请求中断的报错
      if (err.name !== 'AbortError') {
        console.error('请求失败:', err)
      }
    }
  }

  fetchTasks()

  // 清理函数，组件卸载/effect重新触发时终止上一次请求
  return () => controller.abort()
}, []) // 空依赖保证仅在组件首次挂载后执行一次（生产环境）

• 方案2（仅调试用）：临时关闭严格模式
  找到项目入口文件（通常为src/main.jsx或src/index.js），删除外层的<React.StrictMode>标签即可立刻看到单次打印的效果，但不建议长期关闭，严格模式可以帮你提前暴露很多代码逻辑隐患。
• 方案3：排查组件重复挂载的其他原因
  如果已经按方案1调整后仍然出现两次打印，检查上层组件是否存在条件渲染、路由key值变化等会触发当前组件销毁重建的逻辑。

补充说明 #

开发环境下的重复执行仅用于调试校验，生产环境构建后不会出现请求两次的问题，无需额外处理。

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