React-admin 按 ReferenceManyField 中的自定义字段排序答案

【问题标题】：React-admin sorting by custom field in ReferenceManyFieldReact-admin 按 ReferenceManyField 中的自定义字段排序
【发布时间】：2021-05-18 13:10:35
【问题描述】：

根据此处提出的建议：Get ReferenceManyField Count? 我在 react admin 中使用 ReferenceManyField，结合自定义字段来显示返回记录的计数，而不是参考中的任何特定数据字段

import * as React from "react";
import {Datagrid, List, TextField, NumberField, ReferenceManyField} from 'react-admin';

const ShowTotalField = props => <div>{props.total}</div>;

const TeamList = props => {
    return (
        <List {...props}>
            <Datagrid rowClick="edit">
                <TextField label="Team" source="teamName" />
                <ReferenceManyField label="Headcount" reference="reviews" source="teamName" target="team" link={false}>
                    <ShowTotalField />
                </ReferenceManyField>
                <TextField source="managerName" />
                <TextField source="parentTeam" />
                <NumberField source="averageTotal" />
            </Datagrid>
        </List>
    );
};

export default TeamList;

我的问题是我不知道如何按自定义字段中呈现的值对 DataGrid 进行排序，即。计数。单击列标题并没有按照我期望的自然排序。

我可以查看说明如何指定不同的字段以从目标资源中排序的文档：https://marmelab.com/react-admin/List.html#specifying-a-sort-field

但是，由于我正在排序的值（生成的计数值）在目标资源中不可用，因此我无法指定其他字段

如何实现能够按此生成值排序的行为？否则，设置资源或数据提供者以允许返回自定义计算值

谢谢，迈克

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

我已经意识到（尽管这可能相当明显），如果我正在排序的字段在原始资源中不存在，我无法影响列表的排序。

我的用例可能相当独特，我使用提供的仅限本地的fake-rest 组件，因为我故意希望数据只存在于浏览器中，除非导入/导出（没有网络或数据库来公开敏感数据） .如果我有一个更典型的后端服务来提供数据，我可以从后端提供“生成”的值，避免在浏览器中动态执行，让 UI 自然地对它们进行排序。

所以我所做的是在我的自定义数据提供程序中进行一些相当老套的东西，以使我在更新/创建/删除一个资源时保持同步的本地数据结构 - 然后在另一个资源中调用更新函数以通过新的“生成”值。这让我可以在该字段上使用排序/分页/过滤，就好像它自然存在于该资源中一样。所以没有 ReferenceField 或自定义“ShowTotalField”，只是一个 NumberField。

所以我确实在尝试做一些不受支持的事情，但如果 ReferenceFields 周围的文档可以清楚地表明 List/DataGrid 中的任何排序总是会发生，这将有助于我及早理解在 getList() 数据提供者中，并且不可能真正对字段进行排序，除非它存在于该资源下并且数据提供者为您完成。

【讨论】：