reactjs - 如何渲染嵌套在 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,
"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": "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>
);
};
推荐阅读
- asynchronous - 如何实现轮询异步 fn 的 Future 或 Stream?
- mysql - 在 mysql 5.7 中转换 rank() over (partition ....
- java - Google 应用引擎无法创建 DevAppServer
- javascript - NodeJS 从控制台获取 Promise 结果
- java - 如何在不同线程中执行两个接受同一类的可运行实例的方法?
- c# - 将视图模型传递给视图,将文本框中的数据保存到视图模型中,然后将该数据从视图模型传输到我的模型
- php - 如何让 PHP 调用 Ajax
- java - Android 10 创建文件夹 - getExternalFilesDir 改为 getExternalStorageDirectory()(已弃用)
- python - 有人能告诉我以下两种在 Python3 中遍历和修改列表的方法之间的区别吗?
- javascript - 为什么函数参数被“转换”为数组