react-hook-form数据更新场景下Autocomplete提交触发必填错误如何解决

• 字段重复注册：Controller 已经接管了 type 字段的状态管理，你在内部 TextField 上额外加的 {...register('type')} 属于重复注册，两者逻辑冲突，导致表单提交时读取到的是 register 绑定的空值，触发必填校验。
• 受控属性冲突：Autocomplete 已经通过 value 绑定了受控状态，不需要再设置 defaultValue，重复设置会导致状态初始化异常，编辑场景下默认值不生效。
• 边界逻辑缺失：Autocomplete 清空选项时会返回 null，直接取 item.value 会抛出异常，中断字段赋值流程。

直接替换为如下代码即可：

<Controller
  control={control}
  name="type"
  // 编辑态默认值移到这里配置
  defaultValue={props.operation === 'edit' ? props.values.type : null}
  render={({ field: { onChange, value }, fieldState: { error } }) => (
    <Autocomplete
      value={value}
      onChange={(event, item) => {
        // 加空判断避免清空时报错
        onChange(item ? item.value : null);
      }}
      id="type"
      options={projectTypes}
      renderInput={(params) => <TextField 
        {...params}
        error={!!error}
        helperText={error ? error.message : null}
        label="type"
        // 删掉多余的register调用
      />}
    />
  )}
  rules={{ required: 'Project type is required' }}
/>

另外建议将表单全局的默认值统一在 useForm 初始化时通过 defaultValues 参数配置，更符合 react-hook-form 的最佳实践，避免分散配置导致的状态不一致问题。

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