我希望使用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