如何让 axios 拦截器访问我的 React 应用程序的状态？

Question

我正在使用 axios 拦截器来全局处理错误，但想从拦截器设置我的应用程序的状态。就像是：

axios.interceptors.response.use(
   error => {
      AppState.setError(error)
   }
)

function App() {

   [error,setError] = useState()

}

如何从外部访问 App 的状态，或者如何从拦截器调用 App 内定义的函数？

我试过了

axios.interceptors.response.use(
   error => {
      App.setAppErrorState(error)
   }
)

function App() {

   this.setAppErrorState = function(error) {
       // do something with error like set it to state
   }

}

但出现错误“TypeError：无法设置未定义的属性‘setAppErrorState’”

我目前没有使用 Redux，所以不使用它的解决方案会更好。任何帮助表示赞赏！

Answer 1

在组件内部设置拦截器怎么样App？

\n

function App() {\n  const [error, setError] = useState();\n\n  useMemo(() => {\n    axios.interceptors.response.use(\n      error => {\n        setError(error)\n      }\n    )\n  }, [setError])\n\n\n}\n

\n\n

注意（引用自https://reactjs.org/docs/hooks-reference.html#usememo）

\n

\n

您可能会依赖它useMemo作为性能优化，而不是作为语义保证。将来，React 可能会选择 \xe2\x80\x9c 忘记 \xe2\x80\x9d 一些以前记忆的值，并在下次渲染时重新计算它们，例如为屏幕外组件释放内存。编写代码，使其在没有useMemo\xe2\x80\x94 的情况下仍然可以工作，然后添加它以优化性能。

\n

\n