1

在 React-Admin 中，我有一个要管理的项目，它看起来有点像这样：

{
  "title": "Title of my record",
  "source_id": "525560",
  "source_timestamp": 1547732039,
  "tags": [
    {
      "id": 9,
      "name": "Tag0",
      "description": "Descriptio of tag 0"
    },
    {
      "id": 10,
      "name": "Tag1",
      "description": "Descriptio of tag 1"
    }
  ]
}

标签作为主要项目内的对象列表给出。

我希望能够对此进行管理，但我在编辑视图中的代码是错误的：

export const IncidentEdit = props => {
    var _tag_ids = [1,2,3,4];
    return <Edit title={<IncidentTitle/>} {...props}>
        <SimpleForm>
            <TextInput fullWidth source="title"/>
            <TextField source="description"/>

            <ReferenceArrayInput label="tags" reference="tag" source="tags">
                <SelectArrayInput>
                    <ChipField source="name"/>
                </SelectArrayInput>
            </ReferenceArrayInput>

        </SimpleForm>
    </Edit>
};

这不起作用，因为 ReferenceArrayInput 期望record.tags是标签外键列表。它实际上是一个标签列表（因此我们实际上不必查找任何内容）。它也失败了，因为它返回的是一个外键列表——而 API 只是期望返回一个标签对象列表。

我们可能会争辩说 API 设计得很糟糕，但是 React Admin 可以适应吗？

有没有办法让我在将这些记录输入 ReferenceArrayInput 之前将它们转换为外键 ID 列表，然后在将它们发送回 API 之前执行相反的操作？或者，我可以更改 API，以便它只返回外键而不是实际的标签对象。

4

1 回答 1

1

在这种情况下，您似乎不必获取其他数据。您的 API 响应没问题，也许只有方法不是正确的。

为什么不使用ArrayInputwith SimpleIterator？它允许您编辑嵌套记录中的所有字段，甚至ReferenceInputs在需要时使用。

<ArrayInput source="tags">
    <SimpleFormIterator>
        <TextInput source="id" disabled />
        <TextInput source="name" />
        <TextInput source="description" />
    </SimpleFormIterator>
</ArrayInput>
于 2020-09-29T10:57:32.510 回答