React项目中重复发起请求问题排查求助

问题原因 #

请求触发两次最常见的原因是React 18 开发环境下的 Strict Mode（严格模式）。严格模式会在开发阶段刻意重复调用 useEffect 等副作用函数，目的是提前帮你发现潜在的副作用问题，生产环境下不会出现该行为。

同时你的代码还存在依赖缺失的问题：useEffect 依赖数组为空，但内部用到了 parms.id 和 fetching，这可能引发其他逻辑异常。

代码优化方案 #

方案1：适配 Strict Mode 的规范写法（推荐） #

通过给请求添加取消标记，确保重复触发时不会重复更新状态，同时补充正确的依赖：

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { useDocumentTitle } from "../use/useDocumentTitle";
import axios from "axios";

function NewsPage() {
  const { id } = useParams();
  const [news, setNews] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let isCanceled = false;

    const fetchNews = async () => {
      try {
        const response = await axios.get("http://localhost:3000/tz.php", {
          params: { id }
        });
        if (!isCanceled && response.data != null) {
          setNews(response.data);
        }
      } catch (error) {
        console.error("请求新闻失败:", error);
      } finally {
        if (!isCanceled) {
          setIsLoading(false);
        }
      }
    };

    fetchNews();

    return () => {
      isCanceled = true;
    };
  }, [id]);

  return (
    <div>
      {isLoading ? (
        <p>加载中...</p>
      ) : (
        <div>
          {/* 此处添加news内容渲染逻辑 */}
          <Link to="/">返回首页</Link>
        </div>
      )}
    </div>
  );
}

export default NewsPage;

方案2：临时关闭 Strict Mode（仅用于验证） #

若要快速验证是否为严格模式导致，可找到项目入口文件（通常是 index.js），移除 <React.StrictMode> 标签，开发环境下请求就只会执行一次。但不建议长期这么做，因为严格模式能帮你提前发现潜在问题。

关键改进点 #

• 补充 useEffect 依赖数组：加入 id，确保路由参数变化时重新请求数据
• 添加请求取消标记：避免组件卸载或重复请求时，旧请求完成后更新状态引发异常
• 优化状态命名：isLoading 比 fetching 语义更清晰
• 使用 async/await：相比 .then 写法更易读和维护

请求截图：

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