微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React Admin发出第二个请求,第一个请求的响应

如何解决React Admin发出第二个请求,第一个请求的响应

我正在尝试使用react admin和api平台创建我的管理站点。 一切正常,但是,我不知道为什么我上载文件时会收到带有响应201的自定义请求,但是第二个请求是第一个请求的响应。 有人可以告诉我我错了吗?

import React from "react";
import {ImageField,ImageInput,ReferenceInput,AutocompleteInput} from 'react-admin';
import {Redirect,Route} from "react-router-dom";
import RichTextInput from 'ra-input-rich-text';
import {
    HydraAdmin,ResourceGuesser,InputGuesser,EditGuesser,CreateGuesser,hydraDataProvider as baseHydraDataProvider,fetchHydra as baseFetchHydra
} from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./authProvider";
import ListGuesser from "@api-platform/admin/lib/ListGuesser";
import FieldGuesser from "@api-platform/admin/lib/FieldGuesser";
import ShowGuesser from "@api-platform/admin/lib/ShowGuesser";

const entrypoint = process.env.REACT_APP_API_ENTRYPOINT;
const fetchHeaders = {Authorization: `Bearer ${window.localStorage.getItem("admin_token")}`};
const fetchHydra = (url,options = {}) => baseFetchHydra(url,{
    ...options,headers: new Headers(fetchHeaders),});

const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint,{headers: new Headers(fetchHeaders)})
    .then(
        (({api}) => {
            api.resources.map(resource => {
                if ('http://schema.org/ImageObject' === resource.id) {
                    resource.fields.map(field => {
                        if ('file' === field.name) {
                            field.denormalizeData = value => ({
                                src: value
                            });

                            field.normalizeData = value => {
                                if (value && value.rawFile instanceof File) {
                                    console.log("Instance file")
                                    const body = new FormData();
                                    body.append('file',value.rawFile);

                                    return fetch(`${entrypoint}/game_images`,{
                                        body,method: 'POST',headers: {
                                            Authorization: `Bearer ${window.localStorage.getItem("admin_token")}`,}
                                    })
                                        .then(response => response.json());
                                }

                                return value.src;
                            };
                        }
                        return field;
                    });
                }
                return resource;
            });

            return {api};
        }),(result) => {
            switch (result.status) {
                case 401:
                    return Promise.resolve({
                        api: result.api,customroutes: [
                            <Route path="/" render={() => {
                                return window.localStorage.getItem("admin_token") ? window.location.reload() :
                                    <Redirect to="/login"/>
                            }}/>
                        ],});

                default:
                    return Promise.reject(result);
            }
        },);
const dataProvider = baseHydraDataProvider(entrypoint,fetchHydra,apiDocumentationParser);

const GameImageList = props => (
        <ListGuesser {...props}>
            <FieldGuesser source="filePath"/>
            <FieldGuesser source="game"/>
        </ListGuesser>
);

const GameShow = ( props) => (
        <ShowGuesser {...props} >
                <ImageField source="contentUrl" title="title"/>
        </ShowGuesser>
)

const GameImageCreate = props => (
    <CreateGuesser {...props}>
        <ImageInput source="file" label="Related pictures" accept="image/*">
            <ImageField source="src" title="title"/>
        </ImageInput>
    </CreateGuesser>
);

const GameImageUpdate = props => (
    <CreateGuesser {...props}>
        <ImageInput source="filePath" accept="image/*">
            <ImageField source="src" title="title"/>
        </ImageInput>
        <InputGuesser source={"game"}/>
    </CreateGuesser>
);

const GameCreate = props => (
    <CreateGuesser {...props}>
        <InputGuesser source={"name"}/>
        <RichTextInput source={"text"}/>
        <InputGuesser source={"rate"}/>
        <ReferenceInput
            source="gameImage"
            reference="game_images"

        >
            <AutocompleteInput optionText="@id"/>

        </ReferenceInput>
    </CreateGuesser>
)

const GameEdit = props => (
    <EditGuesser {...props}>
        <InputGuesser source={"name"}/>
        <RichTextInput source={"text"}/>
        <InputGuesser source={"rate"}/>
        <ReferenceInput
            source="gameImage"
            reference="game_images"

        >
            <AutocompleteInput optionText="@id"/>

        </ReferenceInput>
    </EditGuesser>
);


export default () => (
    <HydraAdmin
        dataProvider={dataProvider}
        authProvider={authProvider}
        entrypoint={entrypoint}
    >
        <ResourceGuesser name="users"/>
        <ResourceGuesser name="games" edit={GameEdit} create={GameCreate}/>
        <ResourceGuesser name="game_images" show={GameShow} list={GameImageList} create={GameImageCreate} edit={GameImageUpdate}/>
    </HydraAdmin>
);

谢谢您的帮助!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。