Question

我在使用框架的地方有一个数据表。目前，我只是在嘲笑数据，因为我还没有老板的直接指示。

在数据表文档中这样说：

rows：   rows道具是您向我们提供要在表格中呈现的所有行的列表的地方。唯一的硬性要求是这是一个对象数组，并且每个对象上都有一个唯一的id字段。

headers：   headers道具代表标题应在表格中出现的顺序。我们希望传入一个对象数组，其中key是行对象中键的名称，而header是标头的名称。

标题将被硬编码：

为此，我有这个：

const tableHeaders = [
    {
      key: 'device',
      header: t('cancellations.device'),
    },
    {
      key: 'ticketNumber',
      header: t('cancellations.ticketNumber'),
    },
    {
      key: 'itemsCancelled',
      header: t('cancellations.itemsCancelled'),
    },
    {
      key: 'requestDate',
      header: t('cancellations.requestDate'),
    },
    {
      key: 'status',
      header: t('cancellations.status'),
    },
    {
      key: 'requestedBy',
      header: t('cancellations.requestedBy'),
    },
  ];

在我进行硬编码之前，我需要对它进行建模并使其保持原样，而不是硬编码，而是使用真实数据：

const rows = [
    {
      id: 'a',
      device: t('Device 1'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    },
    {
      id: 'b',
      device: t('Device 2'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    },
    {
      id: 'c',
      device: t('Device 3'),
      ticketNumber: t('Ticket Number'),
      itemsCancelled: t('Items Cancelled'),
      requestDate: t('Request Date'),
      status: t('Status'),
      requestedBy: t('Requested By'),
    }
  ];

真实数据如下：

"CancellationRequests": [
    {
      "accountId": 232279,
      "billingCancelReasonId": null,
      "createDate": "2018-09-18T11:28:47-07:00",
      "id": 17195077,
      "modifyDate": "2018-09-18T11:28:48-07:00",
      "notes": null,
      "statusId": 2,
      "ticketId": 65626859,
      "account": null,
      "items": null,
      "status": null,
      "ticket": null,
      "user": null,
      "itemCount": null,
      "__typename": "SoftLayer_Billing_Item_Cancellation_Request"
    },
    {
      "accountId": 232279,
      "billingCancelReasonId": null,
      "createDate": "2018-09-10T11:11:05-07:00",
      "id": 17183859,
      "modifyDate": "2018-09-10T11:11:06-07:00",
      "notes": null,
      "statusId": 2,
      "ticketId": 65169379,
      "account": null,
      "items": null,
      "status": null,
      "ticket": null,
      "user": null,
      "itemCount": null,
      "__typename": "SoftLayer_Billing_Item_Cancellation_Request"
    }
]

因此，将实际数据与硬编码的行进行比较，它应该像这样匹配：

      id: row.id,
      device: row.account,
      ticketNumber: row..ticketId,
      itemsCancelled: row.itemCount,
      requestDate: row.createDate
      status: row.status,
      requestedBy: row.user,

我正在得到这样的值：

data.SoftLayerCancellationRequests.map（item => item）;

但是我不知道如何在新对象中将它们分配给正确的key: value。

PS：我正在使用Reactjs。

组件的库用途：http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20expansion&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

Answer 1

您已经完成了所有艰苦的工作。只需使用问题中已经显示的键匹配来创建新的映射数组即可。

const rows = APIArray.map(row => {
  return {
    id: row.id,
    device: row.account,
    ticketNumber: row.ticketId,
    itemsCancelled: row.itemCount,
    requestDate: row.createDate
    status: row.status,
    requestedBy: row.user
  }
})

如何为数据模型建模？

1 个答案: