ReferenceInput Select Filter 组件表单的输入

Question

我为我的列表视图构建了一个自定义过滤器组件，但我无法为属性填充所有可用选项的 Select 输入。例如

<Form onSubmit={onSubmit} initialValues={filterValues} >
    {({ handleSubmit }) => (
       <form onSubmit={handleSubmit}>
          <ReferenceInput label="Ring Id" source="ringid" reference="candidates">
              <SelectInput optionText="ringid" />
          </ReferenceInput>
       </form>
     )}
</Form>

在不构建 "getMany" dataProvider 的情况下，我被告知我可以访问从 "getList" 提供程序中提取的所有（2,000 多个 ID）"ringid"，并将每个 ID 列出到Select输入字段并在我的自定义过滤器组件中搜索。

提出的问题：

我必须对我可以获得的结果数量进行硬编码（默认 25）
当我通过过滤器组件提交表单进行搜索时，出现 "Associated reference no longer appears to be available." 并且搜索失败。
"getMany" 组件只构建了一半，但似乎 ReferenceInput 只想使用 "getMany"（我被告知构建后端和构建代码以使用 getMany 不是构建的优先事项所以我不能自己建造）

25 Populated IDs Screenshot

Form Error when Filter is submitted ScreenShot

因此，我希望在正确的方向上获得一些帮助，以在 getList dataProvider 中填充所有可用 ID 的 SelectInput，并确保我什至可以在我的 Filter 表单组件中使用此输入。预先感谢您的任何反馈。

Answer 1

1：是的，我认为没有向 ReferenceInput 添加分页的选项，您必须对其进行硬编码，但是，如果您的后端已经支持文本搜索，您可以使用 AutocompleteInput 作为子项，允许用户过滤结果：

<ReferenceInput 
     label="Ring Id" 
     source="ringid" 
     reference="candidates"
     filterToQuery={searchText => ({ paramNameThatYourBackendExpects: searchText })}
>
    <AutocompleteInput optionText="ringid" />
</ReferenceInput>

2 & 3: 2 发生是因为 3.ReferenceInput 仅 "wants" 使用 getMany 因为它也支持 SelectManyInput 作为子项，对于这种情况，最好一次获取所有选定的选项，而不是调用一个一个，所以，为了使代码更简单，ReferenceInput 总是使用 getMany。如果您无法实现 getMany 的后端部分，但可以将代码添加到您的 dataProvider，则可以通过多次调用 getOne 来实现 getMany：

假设一个 v3 数据提供者：

this.getMany = async (resource, params) => {

    const response = {data: []}

    for (const id of params.id) {
        response.data.push(await this.getOne(resource, {id}))
    }

    return response
}

v2是依赖实现的，遵循相同的原则即可。

如果您无法更改数据提供者，例如第三方可用的数据提供者，您可以包装它：

v3

const fakeGetManyDataProvider = dataProvider => ({
    ...dataProvider,
    getMany: async (resource, params) => {
        const response = {data: []}

        for (const id of params.id) {
            response.data.push(await dataProvider.getOne(resource, {id}))
        }

        return response
    }
})

v2

import { GET_MANY, GET_ONE } from 'react-admin'

const fakeGetManyDataProvider = dataProvider => async (verb, resource, params) => {
    if (verb === GET_MANY) {
            const response = {data: []}

            for (const id of params.id) {
                response.data.push(await dataProvider(GET_ONE, resource, {id}))
            }

            return response
    }
    return dataProvider(verb, resource, params)
}

请注意，为简单起见省略了错误处理，React 管理员期望拒绝承诺而不是未处理的期望，因此您必须处理错误。

ReferenceInput Select Filter 组件表单的输入

ReferenceInput Select Input for Filter component Form

forms

list

view

filter

react-admin