在 React-Admin 中计算来自 ArrayField 或 Datagrid 的条目

问题描述

如何计算数组字段的长度并将其输出为文本字段或数字字段？

工作和输出 DataGrid 的 ArrayField 代码

               <ArrayField source="re_benutzers">
                    <Datagrid>
                        <TextField source="vorname" />
                    </Datagrid>
                </ArrayField>

来源：（来自 Strapi）

 {
    "id": 5,"name": "sdf","re_benutzers": [{
        "id": 1,"vorname": "Something",},

^this 可以容纳多个条目，我想输出计数。

解决方法

您可以使用 FunctionField 组件执行此操作： https://marmelab.com/react-admin/Fields.html#functionfield：

<FunctionField label="Count" render={record => `${record?.re_benutzers?.length ?? ""}`} />

,

我认为您可以为此使用自定义组件而不是 DataGrid。

ArrayField 将注入在列表上下文中检索到的所有 id。 因此，您可以执行以下操作：

const LengthField = (props) => {
    const { ids,loaded } = useListContext(props);
    
    return loaded ? ids.length : null;
};
// And then
<ArrayField source="re_benutzers">
    <LengthField />
</ArrayField>