如何在React Admin的show / ArrayField组件中呈现嵌套在对象内部的数组的内容？

如何解决如何在React Admin的show / ArrayField组件中呈现嵌套在对象内部的数组的内容？

我不知道如何使用react-admin呈现嵌套在记录中的对象数组。我从API获得的数据如下：

{
    "data": {
        "getPromotion": {
            "id": "ckfxvfrvs00033h5sz4ucoi7e","reference": "Monday special","startDate": "2020-10-06T11:20:00.000Z","endDate": "2020-10-13T11:20:00.000Z","promotionItems": {
                "items": [{
                    "id": "ckfxxrcyg00073h5v33a27pb8","productId": "4286857122685","promotionId": "ckfxvfrvs00033h5sz4ucoi7e","retailerId": "ckfxvcmjf00013h5sgi4x56rp","discountPrice": 0.5,"createdAt": "2020-10-06T12:25:10.072Z","updatedAt": "2020-10-06T12:25:10.072Z","owner": "xxxxx@xxxxx.com"
                }],"nextToken": null
            },"createdAt": "2020-10-06T11:20:15.749Z","updatedAt": "2020-10-06T11:20:15.749Z","owner": "xxxxx@xxxxx.com"
        }
    }
}

我的主要Show组件如下所示：

export const PromotionShow = (props) => {
  return (
    <Show {...props}>
      <SimpleShowLayout>
        <TextField source="reference" label="Promotion Code" />
        <DateField source="startDate" />
        <DateField source="endDate" />
        <PromotionItemsGrid />
      </SimpleShowLayout>
    </Show>
  );
};

TextField和DateFields可以很好地呈现，但是PromotionItemsGrid组件仅显示一个没有记录的空白网格。

PromotionItemsGrid组件如下所示：

const PromotionItemsGrid = (props) => {
  console.log("props from the show component",JSON.stringify(props));
  return (
    <List {...props}>
      <ArrayField source="props.record.promotionItems.items">
        <Datagrid>
          <TextField source="id" />
          <TextField source="productId" />
          <TextField source="retailerId" />
          <TextField source="discountPrice" />
        </Datagrid>
      </ArrayField>
    </List>
  );
};

console.log的输出表明组件正在获取它需要的所有数据，我只是想不通如何将数组传递给ArrayField以便Datagrid呈现。

我已经尝试过在ArrayField组件的“源”道具中可以想到的props.record.promotionItems.items的每种组合，但是我得到的只是一个没有行的空白数据网格（但指定的列是那里）。我有足够的信心相信这是我所缺少的愚蠢的事情，但是我无法终生解决。

感谢您的任何帮助！

谢谢

解决方法

对于发现此问题的任何人，我都知道了。我合并了两个组件

export const PromotionShow = (props) => {
  return (
    <Show {...props}>
      <SimpleShowLayout>
        <TextField source="reference" />
        <DateField source="startDate" />
        <DateField source="endDate" />
        <ArrayField source="promotionItems.items" label="Items in Promotion">
          <Datagrid>
            <ReferenceField source="productId" label="UPC" reference="products">
              <TextField source="id" />
            </ReferenceField>
            <ReferenceField
              source="productId"
              label="Product Name"
              reference="products"
            >
              <TextField source="name" />
            </ReferenceField>
            <ReferenceField source="retailerId" reference="retailers">
              <TextField source="name" />
            </ReferenceField>
            <NumberField
              source="discountPrice"
            />
            <DateField source="startDate" />
            <DateField source="endDate" />
          </Datagrid>
        </ArrayField>
      </SimpleShowLayout>
    </Show>
  );
};