问题描述
当我使用 REST API 创建一些帖子“内容”时，我陷入了无休止的加载
没有错误，200 ok响应，POST成功
但仍处于加载状态，收到 200 ok 后
所以，我不能只是加载错误消息...
当我手动去列表时，会创建新帖子
一切都在后端工作，但加载并没有停止..
我尝试使用 onSuccess，但 onSuccess 没有启动
我想提交还没有结束..
帮帮我！
编辑：这里有更多代码！我还在加载中..
其他帖子（例如主题）已成功创建！但内容不是..！
- 这是我的数据提供者
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}`,body: formedData,id: json_1.body },- 这是扩展数据提供程序
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,});
});
}
},};
- 这是 Posts.js 代码
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>
);
};
- 这是我的 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;
- 这是我的 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>
);
};
- 这是我的版本
"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"
}
},解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）