Блог

Введите json для Person — имеет внешнюю карту {key,value}

В столбце «SubSys» я хочу отобразить «БИБЛИОТЕКА» и «СПОРТ» в качестве тегов.

Объект 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>
);
 

Я хочу отобразить подраздел [«Библиотека» «Спорт»], аналогичный тегам [«Спорт» «Код»] на этом изображении

Это не работает, потому что вы используете 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>
    )
}