如何在React-admin中为参考输入重用子资源数据？

Question

在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)) : [])}

猜猜这与第一个问题有关。

提前致谢！

Answer 1

如果不打算获取选择，则 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