Как использовать ChipField реагирующего администратора, если нет имени поля / столбца?

Question

У меня есть поле CheckboxGroupInput, подобное этому:

   <CheckboxGroupInput source="fruits" choices={[
        { 'name': 'apples' },
        { 'name': 'pears' }
    ]} optionValue='name'/>

, которое выдает json значение для поля fruits, когда пользователь выбирает обе опции:

  'fruits': ['apples','pears']

Я хочу отобразить его в List, используя ChipField, для которого требуется source, которого у меня нет, потому что json - это массив простых строк.

source будет "name" «если json выглядело как fruits:[{'name':'apples'}, {'name':'pears'}]

           <ArrayField source='fruits'>
                <SingleFieldList>
                    <ChipField source='???' />  
                </SingleFieldList>
            </ArrayField>

Как я могу показать содержимое массива простых строк с помощью ChipField ИЛИ как мне сказать CheckboxGroupInput, чтобы получить массив объектов вместо строкового массива?

Answer 1

Всегда полезно посмотреть демонстрационный код. Мне удалось создать пользовательский компонент с именем SimpleChipField, изменив пользовательский ChipField из демонстрационного кодаact-admin. Он показывает record как метку.

import React from 'react';
import Chip from '@material-ui/core/Chip';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    main: {
        display: 'flex',
        flexWrap: 'wrap',
        marginTop: -8,
        marginBottom: -8,
    },
    chip: { margin: 4 },
});

const SimpleChipField = ({ record }) => {
    const classes = useStyles();

    return record ? (
        <span className={classes.main}>
            <Chip
                key={record}
                className={classes.chip}
                label={record}
            />
        </span>
    ) : null;
};

SimpleChipField.defaultProps = {
    addLabel: true,
};

export default SimpleChipField;

Чтобы использовать его, просто поместите его вместо обычного ChipField.

    <ArrayField source="fruits">
        <SingleFieldList>
            <SimpleChipField />
        </SingleFieldList>
    </ArrayField>