在我的react应用中，我使用axios拦截器来处理全局错误。因为我使用React Context来显示和处理通知，所以我不得不将拦截器部分移到一个功能组件中，在那里我可以使用React useContext钩子。

const Interceptor = ({ children }) => {
  const { addNotification } = useContext(NotificationContext);

  apiClient.interceptors.request.use(
    (config) => {
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  apiClient.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      if (error.message === "Network Error") {
        if (error?.response?.status === 504) {
          addNotification("error", "Oops!", "gateway_timeout");
        } else {
          addNotification("error", "Oops!", "server_down");
        }
      } else {
        if (error?.response?.config?.url !== "/me") {
          addNotification("error", "Oops!", error.response.data.message);
        }
      }

      return Promise.reject(error);
    }
  );

  return <>{children}</>;
};

这是有效的--第一次出现错误的响应会捕获错误并显示一个通知。第二次第一个通知会再次显示并生成两个新的通知。第三次前三个通知会再次显示并生成三个新的通知，以此类推。问题似乎来自增量运行的拦截器（1、3、6......）。
Demo (hit the login button twice or more to see)