调用react-hook-form的useFieldArray.append触发MUI Select的focus报错

错误根因 #

这个报错是react-hook-form的字段数组状态更新逻辑和MUI Select组件的内置focus逻辑冲突导致的，核心问题出在你给Select组件写死了固定的name属性：

1. useFieldArray的设计要求数组内每个表单控件的name必须和当前项的索引/唯一标识绑定，保证全局唯一，你所有新增的Select都共用同一个name值时，react-hook-form在执行append操作更新表单状态时，会触发旧DOM节点的异常卸载和新节点的挂载。
2. MUI的Select组件内部默认会在挂载/更新后执行focus逻辑，此时旧节点已经被销毁，对应的DOM ref被置为null，调用focus方法时就抛出了空值读取错误。
   你把name改成test2后没有报错只是临时规避，没有解决核心问题，后续新增多个项时仍然可能触发异常。

最佳实践修复方案 #

• 按字段数组的命名规范设置name属性：如果你的useFieldArray关联的表单字段名为fieldArray，每个Select的name要拼接当前项的索引，示例写法：

  {fields.map((item, index) => (
    <Select
      name={`fieldArray.${index}.test`}
      {...register(`fieldArray.${index}.test`)}
      // 其他属性
    />
  ))}
  

• 给列表项根元素设置正确的key属性：优先使用useFieldArray返回的每个field自带的唯一id作为key，不要直接用索引作为key，避免React虚拟DOM diff异常导致不必要的节点销毁重建。
• 不需要自动聚焦的场景可以直接关闭Select的自动聚焦逻辑，给组件加disableAutoFocus属性即可从上层规避该报错。

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