嵌套记录的访问属性

Question

我使用的是React-Admin 3.5.0和 api-platformadmin 2.1.1.

我的一个资源有一个自定义列表。该资源有一个 title 和一个 author. 提交人有以下几个特点，其中之一是： 1. username.

遵循 文件我试图在我的列表中显示作者的用户名，就像这样。

export const MyList = (props) =>
    <List {...props}>
        <Datagrid>
            <TextField source="title" />
            <TextField source="author.username" />
        </Datagrid>
    </List>

这样做是行不通的 字段为 author.username 是空的。

我调查了一下，发现该记录只包含作者的ID。

record:
    ...
    title: "abcde"
    author: "/users/1"

但是服务器的响应中却包含了用户名的属性。

0: {
    ...,
    "title": "abcde",
    "author": {
        "@id": "/users/1",
        "username": "Test"
    }
},
...

有没有什么好办法让它正常工作？

Answer 1

在api-platformadmin源码上发现这个。

用他们的IRI替换嵌入的对象 并将对象本身存储在缓存中以便重用 而不需要发出新的HTTP请求。

而且就在下面。

document[key] = document[key]['@id'];

https:/github.comapi-platformadminblobba0630083f28eaa8806bc1da4613677924604a52srchydradataProvider.js#L75。

这个行为来自于这个拉取请求。

https:/github.comapi-platformadminpull96。

要显示作者字段，你需要为每个字段使用ReferenceField。

export const MyList = (props) =>
    <List {...props}>
        <Datagrid>
            <TextField source="title" />
            <ReferenceField source="author" reference="users">
                <TextField source="username"/>
            </ReferenceField>

            <ReferenceField source="author" reference="users" link={false}>
                <TextField source="email"/>
            </ReferenceField>
        </Datagrid>
    </List>

这样做会使作者字段链接到作者页面。你可以在ReferenceField上通过link={false}来禁用这个功能，就像上面第二个作者字段一样。

React管理员会将所有的作者引用请求打包成一个，所以即使api-platform数据提供商没有做到缓存承诺，你也只需承受一个http请求。

注意：你必须在网站上添加一个 <Resource> 的引用资源--react-admin需要它来获取引用数据。如果你想在侧边栏菜单中隐藏它，你可以省略这个引用中的列表道具。

Answer 2

2.2版本应该支持嵌套嵌入对象。

参见https:/api-platform.comdocsadminhandling-relations#display-a-field-ofan-embedded-relation。

我试过了 不幸的是，它没有为我工作...

import {
    fetchHydra
    HydraAdmin,
    hydraDataProvider as baseHydraDataProvider,
} from "@api-platform/admin";

const dataProvider = baseHydraDataProvider(
    entrypoint,
    fetchHydra,
    apiDocumentationParser,
    true // use embedded!
);

export default () => (
    <HydraAdmin
        dataProvider={dataProvider} authProvider={authProvider} entrypoint={entrypoint} i18nProvider={i18nProvider}>
        <ResourceGuesser name={"users"} list={UserList} icon={UserIcon}/>
         ....
    </HydraAdmin>

如何调试

将转换后的记录数据记录到你的控制台中（这会导致一些错误，但至少你能看到真实的情况）。

const TagsField = ({record, ...props}) => (
    <ArrayField source="images">
        {console.log("Record:")}
        {console.log(record)}
        <TextField source="image"/>
    </ArrayField>
)
... 
export const HouseList = (props) => (
<ListGuesser title="houses" {...props}>
    ....
    <NumberField source="price" label="Price (€)"/>
    <TagsField label="Images" source="images" sortable={false}>
    </TagsField>
    ....

有谁知道，我在这里做错了什么？

甚至更多的细节

https:/github.comapi-platformadminpull299。

Answer 3

我已经创建了PR来增加对嵌入式数组的支持。https:/github.comapi-platformadminpull302。.

它将在下一个版本（一个补丁）。