我希望使用ReferenceArrayInput插入多个客户到预订,但是当我使用它时,创建页面根本不会呈现。管理员休息无法ReferenceArrayInput和SelectArrayInput工作
在bookings.js:
export const BookingCreate = (props) => (
<Create {...props}>
<SimpleForm>
<ReferenceInput label="Customer" source="customer_id" reference="customers" allowEmpty>
<SelectInput optionText="customer_name" />
</ReferenceInput>
<ReferenceArrayInput source="customer_ids" reference="customers">
<SelectArrayInput optionText="customer_name" />
</ReferenceArrayInput>
</SimpleForm>
</Create>
);
我非常新的反应和javascript和API。我怀疑我可能写了不正确的/缺少的apis。 ReferenceInput工作正常,所以我很困惑。
如果有人可以向我解释什么API被称为ReferenceArrayInput,我应该如何处理它,并提供一个应该包含什么应该包含的例子,我会非常感谢。我已经阅读过文档,但我仍然无法理解它。
这是试图访问创建页面,当我从Web控制台得到了错误:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `BookingCreate`. bundle.js:1090:15
invariant http://localhost:3000/static/js/bundle.js:1090:15
instantiateReactComponent http://localhost:3000/static/js/bundle.js:41629:23
performInitialMount http://localhost:3000/static/js/bundle.js:99988:17
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104483:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101351:27
mountComponent http://localhost:3000/static/js/bundle.js:101170:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99992:18
mountComponent http://localhost:3000/static/js/bundle.js:99879:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100386:24
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100375:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100345:5
updateComponent http://localhost:3000/static/js/bundle.js:100266:7
receiveComponent http://localhost:3000/static/js/bundle.js:100168:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
_updateChildren http://localhost:3000/static/js/bundle.js:104557:26
updateChildren http://localhost:3000/static/js/bundle.js:104544:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101590:7
updateComponent http://localhost:3000/static/js/bundle.js:101408:5
receiveComponent http://localhost:3000/static/js/bundle.js:101370:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99525:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104453:11
试图让ReferenceArrayInput工作,然后我又尝试让SelectArrayInput工作,但是当我尝试它给出了导致Create页面不呈现的相同问题。
从我的测试/可能误导的理解,我的印象是,SelectArrayInput显示在我的创建页面上,我甚至不需要为它写任何apis或变量,这只会成为一个问题之后已经使用来自SelectArrayInput的输入进行api调用。
使用bookings.js为例:
export const BookingCreate = (props) => (
<Create {...props}>
<SimpleForm>
<SelectArrayInput source="categories" choices={[
{ id: 'music', name: 'Music' },
{ id: 'photography', name: 'Photo' },
{ id: 'programming', name: 'Code' },
{ id: 'tech', name: 'Technology' },
{ id: 'sport', name: 'Sport' },
]} />
<SelectInput source="category" choices={[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' },
{ id: 'photography', name: 'Photography' },
]} />
</SimpleForm>
</Create>
);
我在Web控制台得到了SelectArrayInput同样的错误,以及:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `BookingCreate`. bundle.js:1090:15
invariant http://localhost:3000/static/js/bundle.js:1090:15
instantiateReactComponent http://localhost:3000/static/js/bundle.js:41629:23
performInitialMount http://localhost:3000/static/js/bundle.js:99985:17
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
mountChildren http://localhost:3000/static/js/bundle.js:104480:28
_createInitialChildren http://localhost:3000/static/js/bundle.js:101348:27
mountComponent http://localhost:3000/static/js/bundle.js:101167:7
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
performInitialMount http://localhost:3000/static/js/bundle.js:99989:18
mountComponent http://localhost:3000/static/js/bundle.js:99876:16
mountComponent http://localhost:3000/static/js/bundle.js:12123:18
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100383:24
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
_updateRenderedComponent http://localhost:3000/static/js/bundle.js:100372:7
_performComponentUpdate http://localhost:3000/static/js/bundle.js:100342:5
updateComponent http://localhost:3000/static/js/bundle.js:100263:7
receiveComponent http://localhost:3000/static/js/bundle.js:100165:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
_updateChildren http://localhost:3000/static/js/bundle.js:104554:26
updateChildren http://localhost:3000/static/js/bundle.js:104541:7
_updateDOMChildren http://localhost:3000/static/js/bundle.js:101587:7
updateComponent http://localhost:3000/static/js/bundle.js:101405:5
receiveComponent http://localhost:3000/static/js/bundle.js:101367:5
receiveComponent http://localhost:3000/static/js/bundle.js:12202:5
updateChildren http://localhost:3000/static/js/bundle.js:99522:9
_reconcilerUpdateChildren http://localhost:3000/static/js/bundle.js:104450:11
SelectInput工作得很好。为什么?
我真的很感激任何帮助。这一直困扰着我好几天。
你看到在浏览器控制台中的任何错误讯息? – wesley6j
@ wesley6j感谢您的时间。我在编辑的文章中包含了错误日志。 –
从错误消息'元素类型无效...未定义',我想这是因为您没有正确导入AOR的某些组件? – wesley6j