访问嵌套记录的属性

Question

我正在使用 React-Admin 3.5.0 和 api-platform/admin 2.1.1.

我有一个资源的自定义列表。
该资源有一个 title 和一个 author。作者有几个属性，其中之一是 username.

在 documentation 之后，我尝试在我的列表中显示作者的用户名，如下所示：

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 平台管理源代码上找到这个：

Replace embedded objects by their IRIs, and store the object itself in the cache to reuse without issuing new HTTP requests.

正下方：

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

https://github.com/api-platform/admin/blob/ba0630083f28eaa8806bc1da4613677924604a52/src/hydra/dataProvider.js#L75

此行为来自此拉取请求：

https://github.com/api-platform/admin/pull/96

要显示作者字段，您需要为每个字段使用 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>

这样做会使作者字段 link 进入作者页面。您可以在 ReferenceField 上禁用此传递 link={false}，就像在上面的第二个作者字段上一样

React admin 会将所有这些作者参考请求打包成一个，所以即使 api-platform data provider 不会履行它的缓存承诺，你最终也只会收到一个 http 请求。

注意：您必须为参考资源添加一个 <Resource> - react-admin 需要它来获取参考数据。如果你想在侧边栏菜单中隐藏它，你可以省略这个参考中的 list 属性。

Answer 2

2.2 版应该支持 nested/embedded 个对象：

见 https://api-platform.com/docs/admin/handling-relations/#display-a-field-of-an-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.com/api-platform/admin/pull/299

Answer 3

我创建了 PR 以添加对嵌入数组的支持：https://github.com/api-platform/admin/pull/302。

会在下一个版本（一个补丁）中。

访问嵌套记录的 属性

Access Property of a Nested Record

api-platform.com

react-admin

访问嵌套记录的属性