[CheckboxGroupInput保存到react-admin后未呈现

Question

我是React和react-admin的新手，我对CheckboxGroupInput或数组类型的任何输入都有问题。

我有一个表格，这是代码：

export const MoviesCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name" validate={[required()]} />
            <TextInput source="actors" validate={[required()]} />
            <TextInput source="year" validate={[required()]} />
            <CheckboxGroupInput source="gender" validate={[required()]} choices={[
                { id: 'Action', name: 'Action' },
                { id: 'Adventure', name: 'Adventure' },
                { id: 'Animation', name: 'Animation' },
                { id: 'Biography', name: 'Biography' },
            ]} />
        </SimpleForm>
    </Create>
);

因此，当我想创建一个新项目时，点击保存按钮后出现此错误：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义的文件中导出组件，或者可能混淆了默认导入和命名导入。

我认为问题在于，REST API的响应未正确返回，但我不知道正确的格式是什么。这些是我尝试从REST API返回的响应，但无济于事：

1。

{id: 42, name: "test", year: "1234", actors: "asd", gender: "Adventure,Animation"}

2。

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: ["Animation", "Adventure"]}

3。

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}

4。

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: {id: "Animation", name: "Animation"}}

我对ArrayInput或AutocompleteArrayInput有相同的问题...

有人可以帮助我解决这个问题，并告诉我我做错了什么吗？

Answer 1

如果要让用户通过显示所有可能值来在可能值列表中选择多个值，则<CheckboxGroupInput>是正确的组件。设置choices属性以确定选项（使用id，name元组）：

Description

<CheckboxGroupInput source="category" choices={[
    { id: 'programming', name: 'Programming' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'photography', name: 'Photography' },
]} />

因此，REST API的响应应类似于：选项3

{id: 43, name: "Black Friday", year: "1234", actors: "asd", gender: [{id: "Adventure", name: "Adventure"}, {id: "Animation", name: "Animation"}]}