Admin On Rest中Create动作引入FileInput报错排查请求

我一眼就看出问题啦——你把FileInput放在了SimpleForm的外面，而Create组件只接受单个表单组件作为直接子元素，这就是渲染报错的核心原因。

问题分析 #

Admin-on-rest的Create组件要求其直接子节点必须是表单容器（比如SimpleForm、TabbedForm这类），所有的输入组件（包括FileInput）都必须嵌套在这个表单容器内部。如果把输入组件放在表单外面，组件结构不符合库的预期，就会抛出你遇到的渲染错误。

修正后的代码 #

import React from 'react';
import {Create, SimpleForm, TextInput, ReferenceInput, SelectInput, FileInput, FileField} from 'admin-on-rest';

export default (props) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <ReferenceInput label="Project" source="projectId" reference="projects" allowEmpty>
        <SelectInput optionText="name"/>
      </ReferenceInput>
      {/* 将FileInput移入SimpleForm内部，符合组件结构要求 */}
      <FileInput source="files" label="Related files" accept="application/pdf">
        <FileField source="src" title="title" />
      </FileInput>
    </SimpleForm>
  </Create>
);

额外提示 #

另外要注意，FileInput依赖你的dataProvider支持文件上传功能，确保后端能正确处理multipart/form-data格式的请求，否则后续上传操作可能会失败。

内容的提问来源于stack exchange，提问作者Tomasz Skorupka