Reactjs JSON 数据导入模型 class

Question

Web API 服务某些列不return 服务。因此，我在正面使用的列会出现 undefined 错误。因为如果一个字段为空，它不会 return 来自服务。这是公司规定，我不能更改！

我可以添加不在数据中的列。但我不想因为性能而这样做。因为更多的记录可以来自服务

ReactJS可以做数据建模吗？我该怎么做？

数据return来自 Web API 服务：

[
  {
    "approvementType": "Waiting Approvement",
    "processName": "update",
    "screeName": "XYZ",
    "customerNo": 12345,
    "customerAccountNo": 12345,
    "customerName": "Paul",
    "description": "updating data"
   },
   {
    "processName": "insert",
    "screeName": "ABC",
    "customerNo": 12345,
    "customerName": "Alex",
    "description": "inserting data"
   }
   {
    "approvementType": "Complete Approvement",
    "customerNo": 987,
    "customerName": "Kane",
    "customerAccountNo": 0,
    "description": "complete data",
   }
]

应该是数据建模后的结果：

[
  {
    "approvementType": "Waiting Approvement",
    "processName": "update",
    "screeName": "XYZ",
    "customerNo": 12345,
    "customerAccountNo": 12345,
    "customerName": "Paul",
    "description": "updating data"
   },
   {
    "approvementType": "",
    "processName": "insert",
    "screeName": "ABC",
    "customerNo": 12345,
    "customerAccountNo": 0,
    "customerName": "Alex",
    "description": "inserting data"
   }
   {
    "approvementType": "Complete Approvement",
    "processName": "",
    "screeName": ""
    "customerNo": 987,
    "customerName": "Kane",
    "customerAccountNo": 0,
    "description": "complete data",
   }
]

Answer 1

如果属性不在响应中，前端不知道属性在这种情况下，您需要手动添加到您的对象，或者您可以将 TypeScript 与您的 React 应用程序一起使用获得强类型支持并为您的模型创建接口

此 link 展示了如何将 TypeScript 与 React 连接起来

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Reactjs JSON 数据导入模型 class

Reactjs JSON data into model class

reactjs

data-modal