如何在 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": "[e-mail]"
}],
"nextToken": null
},
"createdAt": "2020-10-06T11:20:15.749Z",
"updatedAt": "2020-10-06T11:20:15.749Z",
"owner": "[e-mail]"
}
}
}

我的主要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进行渲染。

我已经尝试了我能在"；源"；属性，但我得到的只是一个没有行的空白数据网格(但指定的列在那里(。我有理由相信我错过了一件愚蠢的事情，但我一辈子都无法解决。

感谢您的帮助！

谢谢，

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