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

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

1 个答案: