admin on rest无法使用ReferenceArrayInput和SelectArrayInput工作

Question

我希望使用ReferenceArrayInput将多个客户插入预订，但是当我使用它时，创建页面根本不会呈现。

in 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和apis。我怀疑我可能写错了/遗失了api。 ReferenceInput工作正常，所以我很困惑。

如果有人可以请我解释为ReferenceArrayInput调用api以及我应该如何处理它并提供响应包含的内容的示例我将非常感激。我已经阅读了文档，但我仍然无法理解。

这是我在尝试访问“创建”页面时从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，我甚至不需要为它编写任何api或变量，这只会成为api之后的问题已使用SelectArrayInput。

的输入进行调用

以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工作得很好。为什么呢？

我非常感谢任何帮助。这让我困扰了好几天。

Answer 1

customer_name必须在每个customer回复

中

<ReferenceInput label="Customer" source="customer_id" reference="customers" allowEmpty>
    <SelectInput optionText="customer_name" />
</ReferenceInput>

我知道这很简单，但对我来说很清楚，如果我可以说它应该如何运作。它的字面意思是：＆＃34;我尝试向我的对象写customer_id。开始转到服务器customers并获取记录。当我选择其中一个SelectInput时写customer_name＆＃34;

<ReferenceArrayInput source="customer_ids" reference="customers">
    <SelectArrayInput optionText="customer_name" />
</ReferenceArrayInput>

＆＃34;我尝试将customer_ids写入我的对象。开始转到服务器customers并获取记录。当我选择其中一个SelectInput时写customer_name＆＃34;

再一次，抱歉显而易见的事情。

如果您的问题现在仍然存在，请写一个json对象customer