Material UI v4 Autocomplete配合react-hook-form设置默认值首次不生效求助

问题根因 #

• Controller的render回调未接收field参数，没有把react-hook-form托管的状态和事件绑定到Autocomplete组件上，两边状态完全隔离，自然无法生效默认值
• 重复配置defaultValue：Controller已经托管了表单字段状态，额外给Autocomplete传defaultValue会引发状态冲突
• 缺少isOptionEqualToValue配置：Autocomplete默认通过引用相等判断值是否匹配，若默认值对象和options数组中的对应项不是同一个引用，就会识别失败

修改后的代码 #

// 传入的data格式示例如下
// [{name: 'ABCDE', email: 'ABCDEEE@gmail.com'}, {name: 'eeeeee', email: 'eeeeee12@gmail.com'}]

const UserSelection = ({ data = [], onChangeHandler }) => {
  const selectedUserEmail = "ABCDEEE@gmail.com";
  const { control } = useForm({
    // 建议统一在useForm配置里设置默认值，优先级更高
    defaultValues: {
      "combo-box-demo": data.find(item => item.email === selectedUserEmail)
    }
  });

  return (
    <>
        <Controller
          name="combo-box-demo"
          control={control}
          render={({ field: { value, onChange } })  =>
            <Autocomplete
              id="combo-box-demo"
              size="small"
              options={data}
              value={value} // 绑定Controller管理的value
              // 同步值到react-hook-form，同时触发自定义的onChangeHandler
              onChange={(e, newValue) => {
                onChange(newValue)
                onChangeHandler?.(e, newValue)
              }}
              // 新增：通过email字段判断值是否相等，避免引用不同导致匹配失败
              isOptionEqualToValue={(option, value) => option.email === value.email}
              getOptionLabel={option => option.name }
              renderOption={(option) => <>{option.name}</>}
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="outlined"
                  placeholder="Select"
                />
              )}
            />
          }
        />
    </>
  );
};

export default UserSelection;

额外注意事项 #

• 如果data是异步请求获取的，需要等data加载完成后再初始化组件，或者通过reset方法在data加载后重新设置默认值
• 若不需要react-hook-form托管该字段的表单校验、提交逻辑，可以直接移除Controller包裹，仅用Autocomplete本身的defaultValue即可正常工作

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