react-admin - React Admin：如何修复 Create 中的无休止加载

问题描述

使用 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}`, {
        method: "POST",
        body: formedData,
      });
      return {
        data: { ...params.data, 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"
      }
    },

标签： react-admin

react-admin - React Admin：如何修复 Create 中的无休止加载

问题描述

解决方案

推荐阅读