React Admin 5.1中TranslatableInputs嵌套ArrayInput+SimpleFormIterator异常

问题背景 #

使用TranslatableInputs嵌套ArrayInput+SimpleFormIterator构建的表单，在React Admin 4.x中可正常工作，但升级到5.1版本后出现两个问题：

• 无法加载items字段的实际值
• 点击删除按钮无法移除对应items数据

原代码示例：

const OrderEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="customer"/>
      <TranslatableInputs locales={['en', 'fr']}>
        <ArrayInput source="items">
          <SimpleFormIterator>
            <TextInput source="name"/>
          </SimpleFormIterator>
        </ArrayInput>
      </TranslatableInputs>
    </SimpleForm>
  </Edit>
);

问题原因 #

React Admin 5.x对TranslatableInputs的上下文传递逻辑做了调整，原4.x中自动为嵌套ArrayInput添加locale前缀的机制不再生效，导致ArrayInput无法正确定位到对应locale下的items数据源，进而引发数据加载失败和删除操作无效。

修复方案 #

通过自定义组件手动结合useTranslatableContext获取当前locale，拼接正确的数据源路径，让ArrayInput能正确绑定对应locale下的数组数据：

import { Edit, SimpleForm, TextInput, ArrayInput, SimpleFormIterator, TranslatableInputs, useTranslatableContext } from 'react-admin';

// 适配Translatable上下文的ArrayInput包装组件
const TranslatableArrayInput = ({ source, ...props }) => {
  const { locale } = useTranslatableContext();
  // 拼接当前locale对应的数据源路径
  const translatableSource = `${locale}.${source}`;
  return <ArrayInput source={translatableSource} {...props} />;
};

const OrderEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="customer" />
      <TranslatableInputs locales={['en', 'fr']}>
        <TranslatableArrayInput source="items">
          <SimpleFormIterator>
            <TextInput source="name" />
          </SimpleFormIterator>
        </TranslatableArrayInput>
      </TranslatableInputs>
    </SimpleForm>
  </Edit>
);

额外注意事项 #

• 确保后端数据结构符合多语言嵌套格式，示例结构如下：

{
  "customer": "John Doe",
  "en": { "items": [{ "name": "Book" }] },
  "fr": { "items": [{ "name": "Livre" }] }
}

• 确认数据提供者（Data Provider）支持这种嵌套结构的更新操作，保证删除按钮触发的PATCH请求能正确修改对应locale下的items数组。

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