React Hook Form V7 MUI 5 Autocomplete懒加载值首次提交不校验问题

核心问题根因 #

当前实现中首次提交校验失效，是三个实现偏差叠加导致的：

• 错误使用RHF的非受控ref绑定模式：这种模式下RHF仅会在组件挂载初始阶段读取一次原生input的初始值，后续非原生change事件驱动的值更新，RHF不会主动同步内部存储的字段值。MUI的Autocomplete是复合组件，选中的结构化值本身就不会存在原生input的value属性中，靠ref读input的方式从根上就无法获取真实选中值。
• 异步赋值逻辑没有打通RHF的数据通道：在useEffect里懒加载的选项、预设选中值，全部存在组件本地的itemIdSelected状态中，整个过程没有通知RHF更新它内部存储的itemsId字段值，导致RHF在首次提交时，读到的还是初始化注册阶段的空值。
• 校验上下文更新滞后：首次提交流程触发的全字段值读取动作，会在流程末尾把本地存储的选中值同步到RHF的校验上下文里，这个同步动作是在首次提交的校验流程走完之后才完成的，所以只有第二次点击提交时，校验才能拿到正确的字段值。

修复实现步骤 #

1. 移除旧的非受控ref绑定逻辑
   删掉原代码中通过inputRef绑定RHF、单独把字段注册到RHF的写法，改用RHF官方适配MUI组件的Controller组件接管Autocomplete的受控值同步，从根源避免手动同步的状态不一致问题。
2. 用Controller重构Autocomplete的双向绑定
   核心绑定逻辑参考如下实现，把RHF管理的字段值、onChange回调和Autocomplete的props做映射匹配：

   import { useForm, Controller } from "react-hook-form";
   
   // 表单初始化逻辑
   const { control, handleSubmit, setValue } = useForm({
     defaultValues: {
       itemsId: null // 初始化字段默认空值
     }
   });
   
   // 渲染部分的绑定逻辑
   <Controller
     name="itemsId"
     control={control}
     // 把校验规则直接绑定在Controller上，避免和UI层状态不同步
     rules={{ required: "item required" }}
     render={({ field: { onChange, value }, fieldState: { error } }) => (
       <Autocomplete
         options={itemList}
         getOptionLabel={(item) => item?.name || ""}
         // 把RHF存储的id值，映射为Autocomplete需要的选项对象结构
         value={itemList.find(item => item.id === value) || null}
         // 把Autocomplete选中的选项id，同步回RHF的字段存储
         onChange={(e, selectedItem) => onChange(selectedItem?.id ?? null)}
         renderInput={(params) => (
           <TextField
             {...params}
             label="items"
             margin="normal"
             variant="outlined"
             error={!!error}
             helperText={error?.message}
             required
           />
         )}
       />
     )}
   />
   

3. 异步加载完成后，通过RHF API同步选中值
   懒加载逻辑里，加载完选项列表和预设选中值后，不要只存在本地组件状态，要通过RHF提供的setValue方法把值同步到RHF内部存储，必要时可以开启shouldValidate参数让赋值完成后立刻触发一次校验：

   useEffect(() => {
     // 模拟异步懒加载请求
     const loadLazyData = async () => {
       const fetchedOptions = [
         { id: 1, name: "item1" },
         { id: 2, name: "item2" }
       ];
       setItemList(fetchedOptions);
       // 把预设选中值主动同步到RHF，不要只存本地state
       setValue("itemsId", 2, { shouldValidate: true });
     };
     loadLazyData();
   }, [setValue]);
   

修复后，RHF会全程持有最新的字段值，不管是用户手动选择还是异步赋值的内容，都能在首次提交时被校验规则正确识别，不会再出现需要第二次提交才生效的问题。

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