React处理服务器返回多错误场景的最佳实践

核心思路：先标准化错误格式，再统一渲染 #

第三方 API 返回的错误结构没有统一标准——可能是单个字符串、单个错误对象、错误数组，甚至是网络层面的报错（比如 CORS 拦截、断网）。直接根据类型判断渲染会增加逻辑复杂度，最佳实践是在捕获错误时先将所有异常标准化为数组格式，后续渲染只需要处理数组即可。

代码示例：错误标准化处理 #

async function fetchData() {
  try {
    const res = await fetch('https://third-party-api.com/data');
    if (!res.ok) {
      // 解析 API 返回的错误数据
      const errorData = await res.json();
      // 统一转成数组：如果是数组直接用，否则包装成数组
      const apiErrors = Array.isArray(errorData) 
        ? errorData 
        : [errorData.message || errorData];
      throw apiErrors;
    }
    const data = await res.json();
    // 处理正常数据
  } catch (err) {
    // 处理网络错误等非 API 返回的异常
    const normalizedErrors = Array.isArray(err) 
      ? err 
      : [err.message || '请求失败，请稍后重试'];
    // 将标准化后的错误存入状态
    setErrors(normalizedErrors);
  }
}

统一渲染逻辑 #

不管错误数组长度是 1 还是多个，直接遍历渲染即可，无需额外判断：

{errors.length > 0 && (
  <div className="error-list">
    {errors.map((err, index) => (
      <div key={index} className="error-item">
        {/* 根据错误实际结构调整：如果是对象取message，字符串直接显示 */}
        {typeof err === 'object' ? err.message : err}
      </div>
    ))}
  </div>
)}

关键注意事项 #

1. 不要直接渲染错误数组对象：数组属于引用类型，直接在 DOM 中渲染会显示 [object Object]，必须遍历取出每个错误的具体内容。
2. 适配 API 错误结构：不同第三方 API 的错误格式差异大，有的返回 { error: "xxx" }，有的返回 { errors: ["a", "b"] }，需要根据实际接口调整解析逻辑（比如从 errorData.errors 中提取数组）。
3. 网络错误单独处理：fetch 仅在网络层面失败时才会触发 catch（比如断网、跨域），这类错误是 Error 对象，需要取 err.message 或自定义默认提示。

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