Reactjs 如何在react中将react钩子对象从index.js传递到axios拦截器

我想使用axios请求和响应拦截器在每个请求前后显示/隐藏加载程序。为此，我使用redux来维护加载程序状态，但我不能在拦截器文件中使用

useDispatch

和

useHistory

钩子

所以我想我必须从index.js传递它，但我再次得到同样的错误

钩子调用无效。钩子只能在函数组件的主体内部调用

拦截代码

const handler401 = (dispatch, history) => {
  dispatch(authActions.logOut);
  history.push(LOGIN);
};

const handler500 = (dispatch, error) => {
  let message = L('global.error');
  if (error.response && error.response.data?.error) {
    message = error.response.data.error;
  }
  dispatch(
    uiActions.showNotification({
      title: L('global.errorTitle'),
      message,
      status: 'error',
    })
  );
};

const setupInterceptors = (dispatch, history) => {

  request.api.interceptors.request.use(
    (successfulReq) => {
      console.log('show loader start');
      dispatch(uiActions.showLoader());
      return successfulReq;
    },
    (error) => {
      dispatch(uiActions.hideLoader());
      return Promise.reject(error);
    }
  );

  request.api.interceptors.response.use(
    (response) => {
      dispatch(uiActions.hideLoader());
      return response;
    },
    (error) => {
      console.log('hide loader start');
      dispatch(uiActions.hideLoader());
      if (error.response.status === 401) {
        handler401(dispatch, history);
      } else {
        handler500(dispatch, error);
      }
      return Promise.reject(error);
    }
  );
};

我已经在index.js中注册了这个拦截器

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, useDispatch } from 'react-redux';
import { BrowserRouter, useHistory } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index';
import setupInterceptors from './services/interceptorService';

const history = useHistory();
const dispatch = useDispatch();
setupInterceptors(dispatch, history);

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
reportWebVitals();

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider，useDispatch}；
从“react router dom”导入{BrowserRouter，useHistory}；
从“./App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
从“./store/index”导入存储；
从“./services/interceptorService”导入setupinterceptor；
const history=useHistory（）；
const dispatch=usedpatch（）；
设置拦截器（调度、历史记录）；
ReactDOM.render(
,
document.getElementById（'root'））
);
reportWebVitals（）；

---

如何将以上两个钩子传递给我的拦截器？

不确定您所做的是否正确，但如果您真的想这样做，您必须只在React组件中传递分派和历史记录函数

建议您这样做：

const App = () => {

  const dispatch = useDispatch()
  const history = useHistory()

  useEffect(() => {
    const eventHandlerFn = (success) => {
      dispatch(myAction.doSomething())
      history.push("/yay")
    }

    request.api.interceptors.request.use(eventHandlerFn)
    return () => {
      request.api.interceptors.request.eject(eventHandlerFn);
    }
  }, [])

  return (
  <div>
    <h1>My App</h1>
  </div>
  )
}

const-App=（）=>{
const dispatch=usedpatch（）
const history=useHistory（）
useffect（（）=>{
const eventHandlerFn=（成功）=>{
分派（myAction.doSomething（））
历史推送（“/yay”）
}
request.api.interceptors.request.use（eventHandlerFn）
return（）=>{
request.api.interceptors.request.eject（eventHandlerFn）；
}
}, [])
返回(
我的应用程序
)
}

在这里，我将事件处理程序函数添加到带有

[]

依赖项的useEffect中的axios拦截器中，因此它只在

App

mount上运行，这意味着它在整个应用中只运行一次

由于我是在React组件中执行此操作，因此我可以将连接的内容（如

分派

和

历史

）传递给

设置拦截器

函数

useEffect返回一个函数，在应用程序卸载时清理拦截器事件处理程序