0

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

在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 页面无法呈现的相同问题。

根据我的测试/可能被误导的理解，我的印象是，要在我的 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 工作得很好。为什么？

我真的很感激任何帮助。这几天一直困扰着我。

4

1 回答 1

0

customer_name必须在每个customer响应中

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

我知道这很简单，但对我来说很清楚，如果我能说出它应该如何工作的话。它的字面意思是：“我尝试写入customer_id我的对象。开始去服务器customers并获取记录。当我选择其中一个来SelectInput写入时customer_name”

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

“我尝试写入customer_ids我的对象。开始去服务器customers并获取记录。当我选择其中一个来SelectInput写入时customer_name”

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

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

于 2017-06-25T00:08:30.053 回答