react-admin中SelectArrayInput如何提交对象数组格式数据到服务端？

方案说明 #

不需要更换现有组件，react-admin提供了表单值转换的官方能力，有两种常用实现方式：

方案1：单字段级别转换（更推荐当前场景使用）

直接给SelectArrayInput添加parse属性，该属性专门用于将组件输出的原始值转换为服务端需要的格式，示例代码如下：

<Create {...props}>
    <SimpleForm>
        <ReferenceArrayInput source="clients" reference="client">
            <SelectArrayInput 
                optionText="clientName" 
                parse={value => value?.map(id => ({id})) || []}
            />
        </ReferenceArrayInput>
    </SimpleForm>
</Create>

方案2：表单级别全局转换

如果有多个字段需要统一调整提交格式，可以使用Create或SimpleForm的transform属性，对整个表单的提交数据做批量处理，示例代码如下：

<Create 
    {...props}
    transform={data => ({
        ...data,
        clients: data.clients?.map(id => ({id})) || []
    })}
>
    <SimpleForm>
        <ReferenceArrayInput source="clients" reference="client">
            <SelectArrayInput optionText="clientName" />
        </ReferenceArrayInput>
    </SimpleForm>
</Create>

两种方案均兼容现有组件逻辑，不会影响数据源拉取和选项展示的原有功能。

内容的提问来源于stack exchange，提问作者Cesare Contini