React切换标签页后Axios请求完成时SetState未更新的解决方法

问题出在两个核心点：一是不必要地用sessionStorage同步loading状态，导致页面从后台切回时状态不同步；二是未处理请求失败场景，可能导致loading一直处于true状态。

修复步骤： #

• 移除依赖sessionStorage初始化loading的逻辑，loading属于组件内部状态，无需持久化存储，完全由useState管理即可。
• 给axios请求添加错误捕获分支，确保无论请求成功或失败，都能重置loading状态。
• 删除所有sessionStorage相关读写操作，避免状态同步混乱。

修复后的代码： #

const [loading, setLoading] = useState(false);

useEffect(() => {
   console.log(loading);
}, [loading]);

const showReport = () => {
  setLoading(true);
  return axios({
    url: 'api/report/getdata',
    method: 'GET',
    responseType: 'blob'
  }).then(() => {
    // 处理请求成功的业务逻辑
  }).catch((error) => {
    // 处理请求失败的业务逻辑
    console.error('报表请求失败:', error);
  }).finally(() => {
    setLoading(false);
  });
};    

修复逻辑说明： #

1. 移除sessionStorage后，loading状态完全由组件内部状态管理，避免了跨标签页、后台状态同步的异常问题。
2. 使用finally分支统一处理状态重置，不管请求成功或失败，都会执行setLoading(false)，确保状态能正确回归。
3. 浏览器后台运行时，axios的回调会正常执行，页面切回后React会立即处理pending的状态更新，不会出现setLoading(false)不触发的情况。

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