React中Axios请求函数执行两次的问题排查与解决求助

为什么请求会执行两次？ #

• 你直接在组件函数体内调用getTweet()，React组件每次渲染都会执行这段代码。
• 开发模式下React的StrictMode会主动触发一次额外渲染（用于检测不合理的副作用），再加上getTweet内部调用了setTweet等状态更新函数，会再次触发组件重渲染，最终导致请求被执行两次。

修复方法：用useEffect控制执行时机 #

把getTweet()的调用放到useEffect钩子中，并设置空依赖数组，这样它只会在组件首次挂载时执行一次：

1. 首先导入useEffect：

import { useState, useEffect } from 'react';

2. 替换原来直接调用getTweet()的代码：

// 删掉原来的 getTweet();
useEffect(() => {
  getTweet();
}, []); // 空数组表示仅在组件挂载时执行一次

额外优化建议 #

你代码里的localStorage初始化逻辑（判断并设置winstreak），现在每次组件渲染都会执行，虽然不会引发问题，但也可以放到同一个useEffect里，避免重复执行：

useEffect(() => {
  // 初始化localStorage
  let num = [0];
  if (!localStorage.getItem("winstreak")) {
    localStorage.setItem("winstreak", JSON.stringify(num));
  }
  // 调用请求
  getTweet();
}, []);

这样就能彻底解决请求重复执行的问题，同时优化了localStorage操作的执行时机。

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