如何将 key.value 的数组映射到 Chip？我有一个 {k,v} 地图列表

Question

Person 的输入 json - 有一个 xrefAccounts{key,value} 映射

在“SubSys”列中，我想将“LIBRARY”和“SPORTS”显示为标签。

Person json 对象具有所有需要的值，但我不知道如何在 DataGrid 组件中映射它。

我正在使用 react-admin 3.10


[{
 ...
  "xrefAccounts": {
    "LIBRARY": {
      "id": "1",
      "xrefSystemId": "LIBRARY"
    },
    "SPORTS": {
      "id": "1",
      "xrefSystemId": "SPORTS"
    }
  }
},

export const PersonList = props => (
    <List filters={<PersonFilter />} {...props} >
        <Datagrid rowClick="edit">
...

            <ReferenceArrayField label="SubSys" reference="id" source="xrefAccounts.value">
                {/* Find how to put multiple xref in one column SubSys */}
                <SingleFieldList>
                    <ChipField source="value.xrefSystemId" />
                </SingleFieldList>
            </ReferenceArrayField>

            <EditButton />
        </Datagrid>
    </List>
);

我想在此图像中显示类似于标签["Sport" "Code" ]的 SubSys ["Library" "Sports"]

Answer 1

它不起作用，因为您在不是数组的数据上使用 ArrayField - 它是一个对象！

所以最好的办法实际上是修复您的 API 响应结构。

但是......如果你不能这样做 - 当我看到你的尝试时，也许我可以通过自定义字段组件建议以下解决方法：

<XrefAccountsField source="xrefAccounts" />

里面

const XrefAccountsField  = ({source, record = {}}) => {
    const accountsObject = record[source];

    // Convert the record to an array
    const accounts = {
        accountsArr:  accountsObject ? Object.keys(accountsObject).map((key) => accountsObject[key]) : []
    };  
    
    return (
        <ArrayField source="accountsArr" record={accounts}>
            <SingleFieldList>
                <ChipField source="xrefSystemId" />
            </SingleFieldList>
        </ArrayField>
    )
}

如何将 key.value 的数组映射到 Chip？我有一个 {k,v} 地图列表

How do I map an array of key.value to Chip? I have a list of a {k,v} map

react-admin