问题描述
我不知道如何使用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>
);
};