ReferenceInput 为过滤器组件表单选择输入

Question

我为我的列表视图构建了一个自定义过滤器组件，但在填充属性的所有可用选项的选择输入时遇到了问题。比如

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

在没有构建“getMany”数据提供程序的情况下，我告诉我可以访问从“getList”提供程序中提取的所有（2,000 多个 id）“ringid”，并将每个 ID 列出到 SelectInput 字段中并在我的自定义过滤器中搜索组件。

提出的问题：

1. 我必须硬编码我可以获得的结果数量（默认 25）
2. 当我通过过滤器组件将表单提交给“搜索”时，“关联的引用似乎不再可用”。出现并且搜索失败。
3. “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 只“想要”使用 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 是依赖于实现的，只要遵循相同的原则。

如果你不能改变dataProvider，例如第三方可用的dataProvider，你可以包装它：

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 admin 期望拒绝的承诺而不是未处理的期望，因此您必须处理错误。