React Admin AutocompleteArrayInput报错与渲染预填充默认值咨询

问题1：AutocompleteArrayInput 预填充默认值实现 #

分两种场景配置即可：

• Edit页面场景：无需额外配置组件，只要后端返回的表单记录中tags字段值为对应choices的id数组（示例：['programming', 'lifestyle']），组件渲染时会自动匹配选中对应选项。
• Create页面/自定义默认值场景：两种实现方式可选：
  1. 给外层SimpleForm配置initialValues属性，全局设置表单默认值：

     <SimpleForm 
       initialValues={{
         tags: ['programming', 'photography'] // 填入需要预选中的选项id数组
       }}
     >
       {/* 其余表单组件保持不变 */}
     </SimpleForm>
     

  2. 直接给AutocompleteArrayInput添加defaultValue属性，优先级高于表单全局配置：

     <AutocompleteArrayInput
       source="tags"
       defaultValue={['programming']}
       shouldRenderSuggestions={(val) => {
         console.log(val);
         return val.trim().length > 0;
       }}
       choices={[
         { id: 'programming', name: 'Programming' },
         { id: 'lifestyle', name: 'Lifestyle' },
         { id: 'photography', name: 'Photography' },
       ]}
     />
     

问题2：TypeError: Polyglot.transformPhrase expects argument #1 to be string 报错排查 #

该报错是React Admin底层国际化工具Polyglot接收到非字符串类型的翻译参数导致，针对你的代码可按优先级排查：

1. 修复shouldRenderSuggestions方法的空值判断：组件初始化时传入的val可能为undefined，直接调用trim()会抛出异常，异常信息传递到Polyglot时触发类型错误，修改为以下代码即可：

   shouldRenderSuggestions={(val) => {
     console.log(val);
     return val?.trim().length > 0 ?? false;
   }}
   

2. 检查自定义组件EntityInput的返回值，确认entity_ids对应的字段值为字符串类型，若返回数组/对象会导致label翻译时报错。
3. 确认所有表单组件手动传入的label属性均为字符串类型，不要传入数字、数组等其他类型。
4. 若上述排查都无效，可将React Admin升级到v4.x最新稳定版，修复底层已知的国际化兼容bug。

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