React useState错误处理：如何重置报错及合并两类错误处理方案

关于两类错误处理合并的合理性 #

这种方案非常常见。渲染层错误用ErrorBoundary做页面降级，接口层错误用toast做通知，两类错误触发逻辑分离，但可以统一接入国际化翻译、错误上报等公共逻辑，既保证体验一致性，也能降低维护成本。

相同错误重复触发toast的解决方案 #

你遇到的重复相同错误不触发的问题，有两种成熟的处理方式：

• 方案1：请求发起时重置错误状态
  在useFetchSomeData的fetchData方法中，发起请求前先清空上一次的错误，修改对应代码即可：

const fetchData = async () => {
  if (isFetching.current) return;
  isFetching.current = true;
  setLoading(true);
  setError(null); // 新增这行，每次发起新请求先重置错误
  try {
    const data = await api.fetchData(cursor.current);
  } catch(err) {
    setError(err);
  } finally {
    setLoading(false);
    isFetching.current = false;
  }
}

这样每次新请求发起时error会先变为null，就算后续返回和之前完全相同的错误，也会触发useEffect的监听。

• 方案2：暴露重置方法给调用层
  如果有场景需要保留错误状态直到用户手动清除，可以在useFetchSomeData的返回值中新增重置方法：

return {
  data,
  loading,
  error,
  fetchData,
  resetError: () => setError(null) // 新增重置方法
}

在组件的监听逻辑中调用完toast后主动重置：

useEffect(() => {
  if (error) {
    toast.open("error", t(error.code));
    resetError(); // 新增这行
  }
}, [error, t, resetError]);

方案健壮性和通用性说明 #

你当前的实现是这类场景的标准通用方案，健壮性足够，仅存在少量可优化的空间：

• 可以把错误监听、国际化翻译的逻辑直接封装到useFetch类的自定义钩子内部，避免每个调用组件都重复写useEffect监听逻辑，减少重复代码。
• 可以将ErrorBoundary和ToastContext打通，ErrorBoundary捕获到渲染错误时，除了渲染降级Fallback，也可以调用toast弹出全局错误通知，实现两类错误处理逻辑的完全合并。
• 如果有错误上报需求，可以在捕获两类错误的位置统一加上报逻辑，不需要业务层单独处理。
• 如果存在不需要自动弹出toast的接口场景，可以给useFetch钩子加个配置项，控制错误是否自动弹出通知，兼容更多业务场景。

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