ReferenceArrayInput 与 React Admin 上的关系的使用答案

【问题标题】：ReferenceArrayInput usage with relationships on React AdminReferenceArrayInput 与 React Admin 上的关系的使用
【发布时间】：2020-04-30 14:45:42
【问题描述】：

我已关注 ReferenceArrayInput (https://marmelab.com/react-admin/Inputs.html#common-input-props) 的文档，但它似乎不适用于关系字段。

例如，我的用户有这种多对多关系（序列化版本）：

来自（来自我的 API 的原始响应）：

我已经设置 ReferenceArrayInput 如下：

 <ReferenceArrayInput source="profiles" reference="profiles" >
           <SelectArrayInput optionText="label"  />
</ReferenceArrayInput>

我认为它正在做出适当的调用：

但这是我的结果：

知道我做错了什么吗？

提前感谢您的帮助！

【问题讨论】：

标签： react-admin

【解决方案1】：

在文档中，ReferenceArrayInput 被认为期望一个源属性指向一个数组 os ids，原始类型数组，而不是具有 id 的对象数组。看起来您已经从 api 转换原始响应，所以如果您可以进行更多转换，将 [{id}] 映射到 [id]，它可以工作。如果您的应用程序的其他部分希望配置文件是对象数组，只需创建一个新的对象条目，例如 profilesIds 或 _profiles。

【讨论】：

是的，你是对的。我今天早上找到了解决方案，我必须在 ReferenceArrayInput 上格式化我的响应，然后在将数据发送到我的 api 之前将其转换回序列化。

【解决方案2】：

正如 gstvg 所说，ReferenceArrayInput 需要一个原始类型的数组，而不是对象数组。

如果您当前的记录如下：


{
    "id": 1,
    "tags": [
        { id: 'programming', name: 'Programming' },
        { id: 'lifestyle', name: 'Lifestyle' }
     ]
}

你有一个资源/tags，它返回所有标签，如：

[
    { id: 'programming', name: 'Programming' },
    { id: 'lifestyle', name: 'Lifestyle' },
    { id: 'photography', name: 'Photography' }
]

然后你可以这样做（它会选择当前记录的标签）

<ReferenceArrayInput
      reference="tags"
      source="tags"
      parse={(value) => value && value.map((v) => ({ id: v }))}
      format={(value) => value && value.map((v) => v.id)}
    >
      <AutocompleteArrayInput />
</ReferenceArrayInput>

【讨论】：