如何使用 react-admin 的 SelectArrayInput 元素将数据作为对象数组发送到服务器，即 { clients: [id: 1, id: 2]}？

编程问答 2022-04-21

问题描述

在 react-admin 我有以下 ReferenceArrayInput -> SelectArrayInput 组件如下：

<Create {...props}>
    <SimpleForm>

        <ReferenceArrayInput source="clients" reference="client">
            <SelectArrayInput optionText="clientName" />
        </ReferenceArrayInput>

    </SimpleForm>
</Create>

工作正常，它从 client 源接收数据，id 显示带有 clientName 标签的选项。

但是，当表单提交时，它会向服务器发送以下请求正文：

{
   "clients": [1,2,3]
{

我想将其发送为：

{
   "clients": [
     {"id": 1},{"id": 2},{"id": 3}
   ]
}

是否有可能，通过设置某些选项还是我应该使用不同的组件？

解决方法

您有两种选择：

  • 转换 dataProvider 中的数据

  • 将转换函数传递给 transform 或 Create 组件的 Edit 属性。

    export const UserCreate = (props) => {
    const transform = (data) => ({
        ...data,clients: data.clients.map((id) => ({ id })),});

    return (
        <Create {...props} transform={transform}>
            // Your inputs
        </Create>
    );
};
react-adminreactjsreactjsreactjsreactjs