0

在 React 组件中，我想将多个错误作为道具传递给另一个组件，例如如果数组数据为空，将显示“未找到数据”，或者如果发生任何后端问题，则出现特定错误，例如“错误 404”

考虑以下代码片段：

import ErrorCard from "./ErrorCard";

const newData = [
  {
    id: "234abc",
    name: "John",
    age: 26
  },
  {
    id: "234pqr",
    name: "Adams",
    age: 32
  },
  {
    id: "123edf",
    name: "Rock",
    age: 29
  }
];

const DataStream = () => {
  return (
    <>
      {newData == "" ? (
        <ErrorCard data={newData} />
      ) : (
        newData.map((data) => <h5>{data.name}</h5>)
      )}
    </>
  );
};

export default DataStream;

现在在另一个组件中，我想将所有错误作为道具传递

const ErrorCard = ({ data }) => {
  return <>{data == "" ? <h4>No records</h4> : <h4>Error occured</h4>}</>;
};

我的意图是将“ErrorCard”作为通用组件，并将用于任何其他组件。无论数据为空还是数据有后端错误，都应该传递给那个“ErrorCard”组件。

什么可能是最好的解决方案？

这是代码沙盒链接：https ://codesandbox.io/s/pensive-driscoll-wov4q

4

1 回答 1

0

我将创建一个mapError函数来从错误代码中返回错误消息，而不是使用三元运算符的 if-else，如下所示。

const mapError = (code) => {
  const defaultErrorMessages = {
    "404": "Not found",
    "500": "Server error. Please try again",
    ...
  };
  return defaultErrorMessages[code];
};

API 响应应该有 2 个版本的成功数据和错误数据。

const successData = [
  {
    id: "234abc",
    name: "John",
    age: 26
  },
  {
    id: "234pqr",
    name: "Adams",
    age: 32
  },
  {
    id: "123edf",
    name: "Rock",
    age: 29
  }
];

const errorData = {
  error: "error",
  code: "404",
  message: "Error message to display"
};

演示代码框。

于 2021-06-20T05:01:59.600 回答