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元組）：

描述

<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"}]}