React中如何从单个组件传递多个错误作为props给通用错误组件

最优实现方案 #

你当前的实现耦合了数据判断逻辑和错误展示逻辑，复用性很低，改造思路是把错误展示的逻辑完全收敛到ErrorCard内部，调用方只需要传递错误场景对应的配置参数即可，不需要给组件传递原始业务数据。

第一步：改造通用ErrorCard组件 #

给组件设计灵活的可配置props，支持所有常见错误场景：

// ErrorCard.jsx
const ErrorCard = ({ 
  errorMessage = "发生未知错误", 
  errorCode = null,
  showRetry = false,
  onRetry = () => {}
}) => {
  return (
    <div className="error-card">
      <h4>{errorMessage}</h4>
      {errorCode && <p className="error-code">错误码：{errorCode}</p>}
      {showRetry && <button onClick={onRetry}>重新加载</button>}
    </div>
  )
}

export default ErrorCard

• 支持自定义错误文本，空数据、后端错误等不同场景直接传对应文案即可
• 可选错误码字段，适配后端返回错误的场景
• 可选重试按钮，支持请求失败后触发重试逻辑，适用范围更广

第二步：业务组件中调用 #

先修正你原来的判断逻辑，数组判空不要用== ""这种不规范写法，需要分别处理数据为空、数据为null、接口报错三种常见场景：

import ErrorCard from "./ErrorCard";
import { useEffect, useState } from "react";

const DataStream = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  // 模拟接口请求
  useEffect(() => {
    fetch("/api/data")
      .then(res => {
        if(!res.ok) {
          // 捕获后端错误，存错误码和信息
          setError({ code: res.status, message: `Error ${res.status}` })
          return
        }
        return res.json()
      })
      .then(resData => setData(resData))
      .catch(() => setError({ message: "网络请求失败" }))
  }, [])

  // 接口请求报错的场景
  if(error) {
    return <ErrorCard 
      errorMessage={error.message} 
      errorCode={error.code}
      showRetry
      onRetry={() => window.location.reload()}
    />
  }

  // 数据为null的场景
  if(!data) {
    return <ErrorCard errorMessage="Data Not Found" />
  }

  // 数据为空数组的场景
  if(data.length === 0) {
    return <ErrorCard errorMessage="No records" />
  }

  // 正常渲染数据
  return (
    <>
      {data.map(item => <h5 key={item.id}>{item.name}</h5>)}
    </>
  )
};

export default DataStream;

方案优势 #

• 完全解耦，ErrorCard不依赖任何业务数据，所有项目的所有错误场景都可以直接调用
• 扩展性强，后续要加错误图标、自定义样式、跳转按钮等功能，只需要改ErrorCard内部逻辑即可，所有调用方自动生效
• 调用方逻辑清晰，不同错误场景直接传对应配置即可，不需要写冗余的判断逻辑

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