React Admin: how to fix endless loading in Create - react-admin

Question

I'm stuck in endless loading when Create some post "contents" with REST API
there is no error, 200 ok response, and success to POST
but still in loading status, after receive 200 ok
so, I can't chack error massage just loading...
when I go to list manually, there is created new post
every thing working in backend, but loading is not stop..
I try to use onSuccess, but onSuccess does not start
I guess submission is not end..
help me!
edit : Here is more code! I'm still stuck in loading..
other post(ex.Themes) is created successfully! but contents is not..!
this is my dataprovider
getOne: async (resource, params) => {
if (resource === "themes" || resource === "curriculums") {
const { json } = await httpClient(`${PROXY}/${resource}/${params.id}`);
return {
data: json,
};
} else {
const { json: json_1 } = await httpClient(
`${PROXY}/${resource}/${params.id}`
);
return {
data: {
id: json_1.id,
title: json_1.title,
category: json_1.category,
type: json_1.type,
description: json_1.description,
thumbnail: JSON.parse(json_1.metadata).thumbnail,
files: JSON.parse(json_1.metadata).files,
createdDate: json_1.createdDate,
modifiedDate: json_1.modifiedDate,
},
};
}
},
const getFormData = (object) => {
let formData = new FormData();
Object.getOwnPropertyNames(object).forEach((key) => {
if (key === "files") {
let fileData = object[key];
let i,
j = 0;
for (i = 0, j = fileData.length; i < j; i += 1) {
formData.append(key, fileData[i]);
}
} else {
formData.append(key, object[key]);
}
});
return formData;
};
create: async (resource, params) => {
if (resource !== "contents") {
// console.log(params);
const json = await httpClient(`${PROXY}/${resource}`, {
method: "POST",
body: JSON.stringify(params.data),
});
return {
data: { ...params.data, id: json.body },
};
} else {
const formedData = getFormData(params.data);
// for (var pair of formedData.entries()) {
// console.log(pair[0] + ", " + pair[1]);
// }
const json_1 = await httpClient2(`${PROXY}/${resource}`, {
method: "POST",
body: formedData,
});
return {
data: { ...params.data, id: json_1.body },
};
}
},
this is extanding dataprovider
create: (resource, params) => {
if (resource !== "contents" || !params.data.metadata.rawFile) {
// fallback to the default implementation
return dataProvider.create(resource, params);
} else {
const newPictures = params.data.metadata.rawFile;
let transFiles = [];
if (params.data.files) {
const newFiles = params.data.files.filter(
(p) => p.rawFile instanceof File
);
newFiles.map((f) => (transFiles = transFiles.concat(f.rawFile)));
}
// console.log(transFiles);
return new Promise(() => {
dataProvider.create(resource, {
...params,
data: {
title: params.data.title,
type: params.data.type,
category: params.data.category,
description: params.data.description,
thumbnail: newPictures,
files: transFiles,
},
});
});
}
},
};
this is Posts.js code
export const PostShow = (props) => (
<Show title={<PostTitle />} {...props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="title" />
<TextField source="category" />
<TextField source="type" />
<TextField source="description" />
<ImageField source="thumbnail">
<FunctionField
label="Image"
render={(record) => {
return <img src={record.thumbnail} alt="thumbnail" />;
}}
/>
</ImageField>
<FilesField source="files" />
<DateField label="Publication date" source="createdDate" />
<DateField label="Modified date" source="modifiedDate" />
</SimpleShowLayout>
</Show>
);
export const PostEdit = (props) => {
return (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<TextInput source="title" />
<TextInput source="category" />
<TextInput source="type" />
<TextInput multiline source="description" />
<ImageInput
source="metadata"
label="thumbnail"
accept="image/*"
placeholder={<p>Drop your thumbnail here</p>}>
<ImageField source="src" />
</ImageInput>
<FileInput source="files" label="Related files" multiple={true}>
<FileField source="src" title="title" />
</FileInput>
</SimpleForm>
</Edit>
);
};
export const PostCreate = (props) => {
return (
<Create {...props}>
<SimpleForm redirect="list">
<TextInput source="title" />
<TextInput source="category" />
<TextInput source="type" />
<TextInput multiline source="description" />
<ImageInput
source="metadata"
label="thumbnail"
accept="image/*"
placeholder={<p>Drop your thumbnail here</p>}
validate={required()}>
<ImageField source="src" />
</ImageInput>
<FileInput source="files" label="Related files" multiple={true}>
<FileField source="src" title="title" />
</FileInput>
</SimpleForm>
</Create>
);
};
this is my App.js
const App = () => {
return (
<Admin authProvider={authProvider} dataProvider={myDataProvider}>
<Resource
name="contents"
list={PostList}
show={PostShow}
edit={PostEdit}
create={PostCreate}
/>
<Resource
name="themes"
list={ThemeList}
show={ThemeShow}
create={ThemeCreate}
/>
<Resource
name="curriculums"
list={CurriculumList}
show={CurriculumShow}
create={CurriculumCreate}
/>
</Admin>
);
};
export default App;
this is my Themes.js
export const ThemeShow = (props) => (
<Show {...props} title={<ThemeTitle />}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="title" />
<ArrayField source="contents">
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="category" />
<TextField source="type" />
<TextField source="description" />
</Datagrid>
</ArrayField>
<DateField label="Publication date" source="createdDate" />
</SimpleShowLayout>
</Show>
);
export const ThemeCreate = (props) => {
const validateInput = required();
const optionRenderer = (choice) => `${choice.id} (${choice.title})`;
return (
<Create {...props}>
<SimpleForm>
<TextInput source="title" validate={validateInput} />
<ReferenceInput
source="contentIds"
reference="contents"
validate={validateInput}>
<SelectArrayInput optionText={optionRenderer} />
</ReferenceInput>
</SimpleForm>
</Create>
);
};
this is my version
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"react-admin": {
"version": "3.16.4",
"resolved": "https://registry.npmjs.org/react-admin/-/react-admin-3.16.4.tgz",
"integrity": "sha512-l7HEFXmjwqcfuKV0eB3SFPjT/7kP7LjGci4YoPHmy9EFzNtR7uyh2WeCNmgSryTStyu6zKijE/2yRPdfvDhSUw==",
"requires": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.2",
"connected-react-router": "^6.5.2",
"final-form": "^4.20.2",
"final-form-arrays": "^3.0.2",
"ra-core": "^3.16.3",
"ra-i18n-polyglot": "^3.16.3",
"ra-language-english": "^3.16.3",
"ra-ui-materialui": "^3.16.3",
"react-final-form": "^6.5.2",
"react-final-form-arrays": "^3.1.3",
"react-redux": "^7.1.0",
"react-router": "^5.1.0",
"react-router-dom": "^5.1.0",
"redux": "^3.7.2 || ^4.0.3",
"redux-saga": "^1.0.0"
}
},