React中GET请求日志多次打印：请求次数确认与优化方案

问题场景与原始代码 #

我在React中编写了简单的GET请求代码，具体如下：

function App() {
  const [req, setReq] = useState();

  const getBasic = () => {
    axios
      .get(
        "https://financialmodelingprep.com/api/v4/price-target?symbol=AAPL&apikey=********"
      )
      .then((result) => setReq(result));
  };

  useEffect(() => {
    getBasic();
  }, []);

  console.log(req);

  return (
    <div>
    </div>
  );
}

上述代码在控制台中四次打印相同内容。

尝试的修改及结果 #

1. 将console.log(req)移至return中：

return (
  <div>
    {console.log(req)}
  </div>
);

结果依旧是四次打印。

2. 改用async/await语法：

function App() {
  const [req, setReq] = useState();
  const getBasic = async () => {
    const getReq = await axios.get(
      "https://financialmodelingprep.com/api/v4/price-target?symbol=AAPL&apikey=**********"
    );

    setReq(getReq);
  };

  useEffect(() => {
    getBasic();
  }, []);

  console.log(req);

  return (
    <div>
    </div>
  );
}

控制台仍四次打印console.log(req)。

3. 用按钮点击替代useEffect触发请求：

return(
  <div>
    <button onClick={getBasic} />
  </div>
)

每次点击会触发两次日志打印。

我不清楚这些场景下是发送了多次请求还是仅日志重复打印，想了解原因及优化方案。

原因分析 #

1. 请求次数判断：仅日志重复，请求只发一次 #

你可以通过浏览器DevTools的Network面板（筛选XHR/Fetch）查看实际请求数量，或者在axios.get前添加console.log('发送请求')，会发现请求只发送了一次。日志重复是React渲染机制导致的。

2. 开发环境StrictMode的影响 #

在React开发环境中，默认启用的StrictMode会故意让组件函数、useEffect等生命周期钩子执行两次，目的是提前发现潜在的bug（比如未清理的副作用）。结合组件的渲染流程：

• 初始渲染：req为undefined，打印一次；StrictMode触发第二次初始渲染，再打印一次undefined。
• 请求完成后setReq触发更新渲染：打印请求结果；StrictMode触发第二次更新渲染，再打印一次请求结果。
  这就导致了四次日志。

按钮点击时，setReq触发组件更新，StrictMode同样会让更新渲染执行两次，所以每次点击会出现两次日志。

优化方案 #

• 确认真实请求次数：通过Network面板或在请求前加日志，避免被重复打印的日志误导。
• 关闭StrictMode（仅开发环境可选）：在src/index.js中去掉<React.StrictMode>的包裹，这样组件和useEffect只会执行一次，日志次数会减少。注意生产环境默认不会有StrictMode的重复执行。
• 精准监听状态变化打印日志：使用useEffect监听req的变化，只在状态更新时打印：

useEffect(() => {
  console.log('当前请求结果:', req);
}, [req]);

这样只会在req从undefined变为请求结果时打印（开发环境StrictMode下会两次，生产环境一次）。

• 避免在return中放置console.log：return中的代码每次渲染都会执行，且console.log返回undefined，不会对JSX产生影响，但属于冗余写法。

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