React Admin中ReferenceManyInput子输入框值为空问题排查

问题描述 #

使用<ReferenceManyInput>组件时，输入框已正常渲染但全部显示空值，API已正确返回关联的prices数据，且包裹<SimpleFormIterator>的上下文提供者包含正确值，但输入框无法读取数据。

组件代码：

const CourseEdit = () => {
    return (
        <Edit mutationMode="optimistic">
            <SimpleForm>
                ...
                <ReferenceManyInput reference="prices" target="course">
                    <SimpleFormIterator inline>
                        <TextInput name="label" source="label" />
                        <NumberInput name="value" source="value" />
                        <BooleanInput name="defaultPrice" source="defaultPrice" />
                    </SimpleFormIterator>
                </ReferenceManyInput>
                ...
            </SimpleForm>
        </Edit>
    );
}

API响应（关键数据片段）：

{
  "prices": [
    {
      "@id": "/api/prices/115",
      "label": "3 lessons",
      "value": 49900,
      "defaultPrice": true
    },
    {
      "@id": "/api/prices/116",
      "label": "4 lessons",
      "value": 64900,
      "defaultPrice": false
    }
  ]
}

解决方案 #

问题出在输入框同时设置了name和source属性，在React-Admin的表单迭代场景中，只需保留source即可，name会被组件自动处理，重复设置会干扰字段绑定路径。

修改后的输入框代码：

<ReferenceManyInput reference="prices" target="course">
    <SimpleFormIterator inline>
        <TextInput source="label" />
        <NumberInput source="value" />
        <BooleanInput source="defaultPrice" />
    </SimpleFormIterator>
</ReferenceManyInput>

原因说明 #

<ReferenceManyInput>会将关联的prices数组注入到表单上下文，<SimpleFormIterator>会遍历数组中的每个对象，输入框通过source属性直接对应对象的字段名即可。额外添加的name属性会改变表单字段的取值路径，导致无法正确读取到数组对象中的属性值，从而显示为空。

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