React页面加载时fetch请求触发两次的原因及解决方法

我编写了一段React代码，页面加载时会触发两次fetch请求，请问原因是什么？如何将请求次数减少为一次？相关代码如下：

UserInfo组件代码 #

import { useEffect, useState } from "react";
import { useCookies } from "react-cookie";

const UserInfo = () => {
    const [cookies, setCookie, removeCookie] = useCookies(['x-auth-token']);
    const [userInfo, setUserInfo] = useState({ _id: 0, name: '', email: '', password: '' });
    useEffect(() => {
        fetch(`http://localhost:8080/api/users/me`, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                'x-auth-token': cookies["x-auth-token"],
            },
            cache: 'no-cache'
        }).then((response) => response.json()).then(data => {
            console.log(JSON.stringify(data));
            setUserInfo(data);
        }).catch((e) => {
            console.log(e);
        });
    }, []);


    return (
        <div className="App">
            <h1>Home</h1>
            <p>Hello {userInfo.name} from {userInfo.email}!</p>
        </div>
    );
}

export default UserInfo;

App.tsx代码 #

import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Register from './pages/register';
import Login from './pages/login';
import Home from './pages/home';
import UserInfo from "./pages/userinfo";

function App() {
  return (
    <React.StrictMode>
      <div className="App">
        <BrowserRouter>
          <Routes>
            <Route path='/register' element={<Register />} />
            <Route path="/login" element={<Login />} />
            <Route path="/user" element={<UserInfo />} />
            <Route path="/" element={<Home />} />
          </Routes>
        </BrowserRouter>
      </div>
    </React.StrictMode>
  );
}

export default App;

原因分析 #

问题出在React.StrictMode的开发环境行为：
在开发模式下，React.StrictMode会刻意重复调用组件的副作用函数（比如useEffect）、状态更新函数等。这么做是为了帮你检测出重复执行可能引发的问题——比如非幂等的请求、内存泄漏、不合理的状态更新逻辑等。你的App组件被React.StrictMode包裹着，所以UserInfo里的useEffect会被执行两次，自然就触发了两次fetch请求。

注意：生产环境下StrictMode不会有这个双重调用的行为，上线后请求会自动变成一次。

解决方案 #

方案一：移除React.StrictMode包裹 #

直接把App.tsx里的<React.StrictMode>标签删掉就行，修改后代码如下：

import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Register from './pages/register';
import Login from './pages/login';
import Home from './pages/home';
import UserInfo from "./pages/userinfo";

function App() {
  return (
      <div className="App">
        <BrowserRouter>
          <Routes>
            <Route path='/register' element={<Register />} />
            <Route path="/login" element={<Login />} />
            <Route path="/user" element={<UserInfo />} />
            <Route path="/" element={<Home />} />
          </Routes>
        </BrowserRouter>
      </div>
  );
}

export default App;

方案二：保留StrictMode，添加防重逻辑 #

如果不想放弃StrictMode的开发检测功能，可以用useRef做一个请求标志，确保副作用只执行一次：
修改UserInfo组件：

import { useEffect, useState, useRef } from "react";
import { useCookies } from "react-cookie";

const UserInfo = () => {
    const [cookies, setCookie, removeCookie] = useCookies(['x-auth-token']);
    const [userInfo, setUserInfo] = useState({ _id: 0, name: '', email: '', password: '' });
    const isFetched = useRef(false); // 用ref记录是否已经发起过请求

    useEffect(() => {
        if (!isFetched.current) { // 只有没请求过的时候才执行
            fetch(`http://localhost:8080/api/users/me`, {
                method: 'GET',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json',
                    'x-auth-token': cookies["x-auth-token"],
                },
                cache: 'no-cache'
            }).then((response) => response.json()).then(data => {
                console.log(JSON.stringify(data));
                setUserInfo(data);
                isFetched.current = true; // 请求完成后标记为已请求
            }).catch((e) => {
                console.log(e);
                isFetched.current = true; // 报错也标记，避免重复请求
            });
        }
    }, []);


    return (
        <div className="App">
            <h1>Home</h1>
            <p>Hello {userInfo.name} from {userInfo.email}!</p>
        </div>
    );
}

export default UserInfo;

内容的提问来源于stack exchange，提问作者Papp Zoltán