如何在React Admin中传递多个optionValue字段并存入Firestore？

下面提供三种可行的实现方案，按需选择：

方法一：用FormDataConsumer实时同步字段 #

通过监听选中的教师ID，自动拉取对应姓名并同步到表单字段：

1. 先调整ReferenceInput的配置，以teacher_id作为绑定字段：

<ReferenceInput
  label="Teacher"
  source="teacher_id"
  reference="teachers"
>
  <AutocompleteInput
    optionText="teacher_name"
    optionValue="teacher_id"
    defaultValue={null}
  />
</ReferenceInput>

2. 添加FormDataConsumer组件，监听ID变化并同步姓名：

import { FormDataConsumer, useGetOne } from 'react-admin';

<FormDataConsumer>
  {({ formData, setFormData }) => {
    const teacherId = formData?.teacher_id;
    // 使用react-admin内置hook获取教师详情
    const { data: teacher } = useGetOne('teachers', { id: teacherId }, { enabled: !!teacherId });

    if (teacher && formData.teacher_name !== teacher.teacher_name) {
      setFormData(prev => ({
        ...prev,
        teacher_name: teacher.teacher_name
      }));
    }

    // 隐藏字段确保teacher_name被提交到数据库
    return <TextInput source="teacher_name" hidden />;
  }}
</FormDataConsumer>

方法二：提交时通过transform函数补全字段 #

如果不需要前端实时同步，可以在表单提交前，根据ID去Firestore查询姓名再一起提交：

import { Create, SimpleForm, ReferenceInput, AutocompleteInput } from 'react-admin';
import { useFirestore } from 'react-admin-firebase';

const YourCreateComponent = () => {
  const firestore = useFirestore();

  // 自定义提交前的数据转换逻辑
  const transformSubmitData = async (data) => {
    if (!data.teacher_id) return data;

    const teacherDoc = await firestore.collection('teachers').doc(data.teacher_id).get();
    if (teacherDoc.exists) {
      return {
        ...data,
        teacher_name: teacherDoc.data().teacher_name
      };
    }
    return data;
  };

  return (
    <Create transform={transformSubmitData}>
      <SimpleForm>
        <ReferenceInput
          label="Teacher"
          source="teacher_id"
          reference="teachers"
        >
          <AutocompleteInput
            optionText="teacher_name"
            optionValue="teacher_id"
            defaultValue={null}
          />
        </ReferenceInput>
        {/* 其他表单字段 */}
      </SimpleForm>
    </Create>
  );
};

方法三：用AutocompleteInput的parse/format直接拆分字段 #

让组件返回完整教师对象，再拆分到两个独立字段：

<ReferenceInput
  label="Teacher"
  source="teacher_temp" // 临时存储完整教师对象的字段
  reference="teachers"
>
  <AutocompleteInput
    optionText="teacher_name"
    // 让选项值返回完整教师对象
    optionValue={(option) => option}
    defaultValue={null}
    // 选择后拆分字段到teacher_id和teacher_name
    parse={(selectedTeacher) => {
      if (!selectedTeacher) return {};
      return {
        teacher_id: selectedTeacher.teacher_id,
        teacher_name: selectedTeacher.teacher_name
      };
    }}
    // 编辑时组合已有数据，保持选中状态
    format={(formData) => {
      if (!formData?.teacher_id) return null;
      return {
        teacher_id: formData.teacher_id,
        teacher_name: formData.teacher_name
      };
    }}
  />
</ReferenceInput>

// 隐藏字段确保两个字段被提交
<TextInput source="teacher_id" hidden />
<TextInput source="teacher_name" hidden />

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