reactjs - 给出这个的 React Routes 组件在 axios 拦截器上未定义

Question

我正在创建一个 axios 拦截器来捕获应用程序范围的 500 错误并显示错误页面。
我是 React 的新手，这是其他人在现有代码库上的。

我面临的问题是 axios 拦截器确实可以工作，但是当我尝试设置状态以呈现组件时它失败了

this.setState({ userLoaded: true, serverError: true }); 

给予：

发生异常。错误：这是未定义的

在 Routes.js 中，我们有这个：

const Routes = observer(class Routes extends React.Component {
  state = { userLoaded: false, serverError: false, serverUnauthorized: false };

  componentDidMount() {
    getMe().then(data => {
      userStore.setCurrentUser(data);
      companyStore.loadSettings();
      this.setState({ userLoaded: true });
    }).catch(({ response }) => {
      if (response.status === 401)
        this.setState({ userLoaded: true, serverUnauthorized: true });
      else if (response.status === 400)
        this.setState({ userLoaded: true, serverError: true });
      else
        this.setState({ userLoaded: true, serverError: true });
    });
    // section to catch application wide errors, happening later on the navigation
    Axios.interceptors.response.use(function (response) {
      // Do something with response data
      return response;
    }, function (err) {
      if (err.response.status >= 500) {
        this.setState({ userLoaded: true, serverError: true }); // <!-- THIS IS FAILING
        console.log('setstate run');
      }
      return Promise.reject(err);
    });
  }

render() {
    return (
         this.state.userLoaded ?
    <BrowserRouter>
      <ScrollToTop>
        <Switch>
          {
            this.state.serverUnauthorized ?
              <Route component={Page401} />
              :
              this.state.serverError ?
                <Route component={Page500} />
... simplified ...       
    );
  }
});

我做错了什么？有没有更好的方法来显示这个拦截和错误屏幕？

标签： reactjstypescriptreact-routeraxios