时间戳

首页 > 解决方案 > 如何在 React-admin 中为引用的输入重用子资源数据？

reactjs - 如何在 React-admin 中为引用的输入重用子资源数据？

问题描述

在 react-admin 文档中，使用的ReferenceArrayInput是这种数据结构：

{
  id: 1,
  groups: [1, 2, 3]
}

接着：

<ReferenceArrayInput source="groups" reference="groups" allowEmpty>
    <SelectArrayInput optionText="name"/>
</ReferenceArrayInput>

使用自定义 json 数据提供程序，它将发出以下请求： https://example.com/api/groups/?ids=[1,2,3]

或者如果 API 不支持WHERE IN，它将对每个 id 进行单独调用：

https://example.com/api/groups/1
https://example.com/api/groups/2
https://example.com/api/groups/3

但是如果我有以下数据结构：

{
  id: 1,
  name: "Pepito Perez",
  groups: [
    { id: 1, name: "HR"}, 
    { id: 2, name: "IT"},
    { id: 3, name: "FINANCE"}
  ]
}

我已经有了名称字段，所以我不想提出其他请求。当我进入编辑视图时，react-admin 执行了近 70 个不必要的请求。

我怎样才能避免这种情况？有没有办法重用数据？

ReferenceArrayInput使用带有对象数组的组件也很棘手，我必须添加一个无意义的format道具才能使其工作：format={v => (v ? v.map(i => (i.id ? i.id : i)) : [])}

猜想它与第一个问题有关。

提前致谢！

标签： reactjsreact-admin

解决方案

如果不打算获取选项，则 ReferenceInput 不是您想要的。您只需要一个带有编程设置选项的 SelectInput。您可以使用 FormDataConsumer 来实现：

        <FormDataConsumer>
            {({ formData, ...rest }) =>
                 <SelectArrayInput
                     source="selectedGroups"
                     optionText="name"
                     choices={formData.groups}
                     {...rest}
                 />
            }
        </FormDataConsumer>

注意不同的源，可能设置为组，等于选择“源”，在第一次选择组之后，将导致重新渲染，让选择值等于单个选定组。

这几乎正​​是文档中 FormDataConsumer 的用例：

https://marmelab.com/react-admin/Inputs.html#linking-two-inputs

推荐阅读