reactjs - 如何在 React Admin 的 show/ArrayField 组件中渲染嵌套在对象内的数组的内容？

Question

我不知道如何使用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,
                    "startDate": "2020-10-06T11:20:00.000Z",
                    "endDate": "2020-10-13T11:20:00.000Z",
                    "createdAt": "2020-10-06T12:25:10.072Z",
                    "updatedAt": "2020-10-06T12:25:10.072Z",
                    "owner": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cab2b2b2b2b28ab2b2b2b2b2e4a9a5a7" rel="noreferrer noopener nofollow">[email protected]</a>"
                }],
                "nextToken": null
            },
            "createdAt": "2020-10-06T11:20:15.749Z",
            "updatedAt": "2020-10-06T11:20:15.749Z",
            "owner": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5129292929291129292929297f323e3c" rel="noreferrer noopener nofollow">[email protected]</a>"
        }
    }
}

我的主要 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 组件的“source”属性中能想到的 props.record.promotionItems.items 的所有组合，但我得到的只是一个没有行的空白数据网格(但指定的列是那里)。我有理由相信这是我错过的一件愚蠢的事情，但我一生都无法解决它。

非常感谢您的帮助!

谢谢

Answer 1

对于任何发现这个的人来说，我已经弄清楚了。我合并了两个组件

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>
  );
};