按引用字段对列表进行排序react-admin

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": [
    {
      "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"
    }
  ]
}

这就是在react-admin 中映射的方式。

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>
);

我的问题是引用显示正确，但是当我单击引用的语言名称列时，react-admin 会按语言的 ID 而不是其名称进行排序。

我需要进行哪些调整才能按名称排序？

Answer 1

该<ReferenceField>组件接受一个sortByprop，它指定用于排序的字段而不是source. 所以对于你的情况，你可以写：

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

React-admin 文档对此进行了解释：

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