react-admin中ReferenceInput内嵌TextInput无法显示关联表字段怎么解决

问题原因 #

ReferenceInput 仅支持接收 choices 属性的输入类组件（如SelectInput、AutocompleteInput等），你嵌套的TextInput不支持该属性，无法解析ReferenceInput拉取的关联表数据，因此只会显示problemID本身的原始值，同时抛出关联不可用的报错。

解决方案 #

根据你的使用场景二选一即可：

场景1：仅需要只读展示resolutionSteps字段

直接使用ReferenceField组件拉取关联数据展示，不需要用输入类组件：

import { Edit, SimpleForm, ReferenceField, TextField } from 'react-admin';

<Edit>
    <SimpleForm>
        <ReferenceField source="problemID" reference="table2" label="解决步骤">
            <TextField source="resolutionSteps" />
        </ReferenceField>
        {/* 其余table1字段 */}
        ...
    </SimpleForm>
</Edit>

场景2：需要支持编辑选择关联的resolutionSteps

ReferenceInput 内嵌套SelectInput组件，配置显示和提交的字段即可：

import { Edit, SimpleForm, ReferenceInput, SelectInput } from 'react-admin';

<Edit>
    <SimpleForm>
        <ReferenceInput source="problemID" reference="table2" label="解决步骤">
            <SelectInput 
                optionText="resolutionSteps" 
                optionValue="problemID"
            />
        </ReferenceInput>
        {/* 其余table1字段 */}
        ...
    </SimpleForm>
</Edit>

以上方案默认你的dataProvider对table2资源的getMany/getList接口逻辑正常，你已经提前注册了table2资源，无需额外修改资源注册逻辑。

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