如何在useMemo实现的错误处理HOC中正确使用useState解决setError失效问题

先修正最基础的状态定义错误 #

• 你现在的useState写法从根上就有问题：const [error, setError] = useState("Error") 把字符串"Error"作为初始值，这个硬编码值是永远为真的，会导致错误Modal从组件首次渲染就一直弹出，完全脱离真实的错误状态。
• 正确的初始值应该是null，代表当前没有捕获到错误：

  const [error, setError] = useState(null);
  

  对应的Modal属性也要调整：show={!!error}，不要直接把error值当布尔判断，避免非预期的真值判断问题。

为什么useMemo模拟挂载时机的写法不可靠 #

• React官方明确说明useMemo是用于缓存计算结果的性能优化手段，不适合承载副作用逻辑。在React 18并发模式、开发环境StrictMode下，useMemo的执行次数、执行时机是不被完全保证的，很可能出现渲染回滚、重复执行的情况，导致拦截器重复注册、逻辑混乱。
• 你之前选择这个写法的核心顾虑是“HOC里的useEffect执行顺序晚于子组件的useEffect，捕获不到更早触发的请求错误”，这个顾虑本身是对的，但解决方案完全错了：
  拦截器是绑定在axios实例上的全局逻辑，根本不需要依赖组件的生命周期来注册。你完全可以在HOC工厂函数被调用（也就是创建被包装组件的那一刻）就完成拦截器注册，不需要等组件渲染、挂载的时候再操作。这样不管业务请求是在渲染阶段、useEffect阶段还是模块顶层发出的，只要走的是这个传入的axios实例，拦截器都能提前捕获错误。

原来的setError不生效的核心原因 #

• 你把拦截器的注册逻辑放在了组件首次渲染的useMemo回调里，只要有任何走这个axios的请求是在这个注册时机之前发出去的，对应的响应错误就算触发，也不会走到你写的错误回调里，自然就看不到setError的执行效果。
• 因为初始值是硬编码的真值，Modal从组件一挂载就处于弹出状态，就算后续setError真的触发了状态更新，你也很难直观感知到变化——毕竟页面上从一开始就一直显示着错误弹窗。
• 另外你现在的写法会给同一个axios实例累加注册拦截器：每次组件渲染都会通过useMemo执行一次拦截器注册，哪怕依赖是空数组，在开发环境的重复渲染逻辑下，也会出现一个错误触发多次拦截器回调的问题，进一步干扰你对状态更新的判断。

修正后的稳定实现逻辑 #

1. 在HOC工厂函数内，为传入的axios实例创建独立的错误订阅集合，只给axios注册一次全局响应拦截器。拦截器捕获到错误时，遍历集合中所有订阅的组件回调，把错误传出去。
2. 每个被包装的组件实例挂载时，把自己的setError方法注册到订阅集合里；组件卸载时，自动移除对应的注册项，避免内存泄漏。
3. 拦截器捕获错误后的日志打印、错误传递逻辑全部统一在全局拦截器里处理，不需要每个组件实例重复注册逻辑。

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