时间戳

首页 > 解决方案 > 将 React-Admin ReferenceInput 与 SelectInput 绑定以在 DOM 上呈现

react-admin - 将 React-Admin ReferenceInput 与 SelectInput 绑定以在 DOM 上呈现

问题描述

我有两个端点

api/指令 api/主题

在我的服务器上，模型指令有一个名为主题的参考字段。

在我的 react-admin 前端，我想 CREATE(CRUD) 一个新的 Instruction 实例。

按照本教程，我实现了我的 InstructionCreate 如下

export const InstructionCreate = (props) => (
    <Create  title="New Instruction"{...props}>
        <SimpleForm>
             <ReferenceInput label="Subject" source="subject" reference="subject/">
                <SelectInput optionText="name" />
            </ReferenceInput>   
        </SimpleForm>
    </Create>

当我从 chrome 控制台渲染我的 Create 组件时，在 networktab 下，我可以看到返回的主题对象列表。

该列表有两个对象（从服务器中提取）并且这些对象有一个属性“名称”

但是，我收到控制台错误

未捕获的类型错误：无法读取未定义的属性“数据”

上述错误发生在

万一需要我的 app.js，我可以从中成功地 CRUD api/subject 端点

const App = () => (    
     <Admin 
         dataProvider={dataProvider}  

         <Resource name="subject" title="Subjects" list={SubjectList} create={SubjectCreate} edit={SubjectEdit}  icon={GroupIcon}/>
         <Resource name="instruction" title="Instructions" list={InstructionList} edit={InstructionEdit} create={InstructionCreate} icon={InstructionIcon}/>

     </Admin>
     );

GET api/subject - 返回字典列表

[ {“id”：2，“名称”：“主题 2”}，{“id”：1，“名称”：“主题 1”}]

标签： react-admin

解决方案

我能够解决这个问题。错误在我这边，因为在引用 var 中包含尾随 '/'

改变了这一行

<ReferenceInput label="Subject" source="subject" reference="subject/">

至

<ReferenceInput label="Subject" source="subject" reference="subject">

推荐阅读