通过引用字段排序列表中反应过来管理员

Question

我开始使用react-admin和基本工作正常。不过，我必须使用ReferenceField一些麻烦。

该REST API，我打电话例如收益以下JSON数据：

/语言

{
  "language": [
    {
      "id": 0,
      "name": "Language #0"
    },
    {
      "id": 1,
      "name": "Language #1"
    },
    {
      "id": 2,
      "name": "Language #2"
    },
    {
      "id": 3,
      "name": "Language #3"
    }
  ]
}

/ myreferences

{
  "myreferences": [
    {
      "id": 0,
      "langauge": {
        "id": 0,
        "name": "Language #0"
      },
      "name": "My reference #0"
    },
    {
      "id": 1,
      "langauge": {
        "id": 1,
        "name": "Language #1"
      },
      "name": "My reference #1"
    },
    {
      "id": 2,
      "langauge": {
        "id": 2,
        "name": "Language #2"
      },
      "name": "My reference #2"
    }
  ]
}

这就是如何映射这反应管理员。

export const LanguageList = props => (
  <List
    title="Languages"
    sort={{ field: "name", order: "ASC" }}
    filters={<LanguageFilter/>}
    {...props}
  >
    <Datagrid>
      <NumberField source="id" label="ID" />
      <TextField source="name" label="Name" />
      <EditButton />
    </Datagrid>
  </List>
); 

export const MyReferenceList = props => (
  <List
    title="My References"
    sort={{ field: "name", order: "ASC" }}
    filters={<MyReferenceFilter />}
    {...props}
  >
    <Datagrid>
      <NumberField source="id" label="ID" />
      <TextField source="name" label="Name" />
      <ReferenceField source="langauge.id" reference="language" label="Language">
        <TextField source="name" />
      </ReferenceField>
      <EditButton />
    </Datagrid>
  </List>
);

我的问题是，引用正确显示，但是当我在列单击引用的语言名称由语言的ID，而不是它的名字反应管理员排序。

我需要做什么去适应，以便按名称排序工作？

Answer 1

所述<ReferenceField>组件接受一个sortBy道具，其指定要用于排序，而不是source领域。所以你的情况，你可以这样写：

      <ReferenceField source="language.id" sortBy="language.name" reference="language" label="Language">
        <TextField source="name" />
      </ReferenceField>

这是该阵营管理员文档中解释说：

https://marmelab.com/react-admin/Fields.html#referencefield