如何在React管理中重用引用输入的子资源数据

Question

在react管理文档中，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管理员执行了近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-两个输入