如何解决react-hook-form重置Chakra Select后占位符不显示的问题？

问题根源 #

1. 表单重置后country值为undefined，传给Select组件的value也是undefined，但Chakra UI的Select组件无法将undefined识别为未选中状态，因此仍保留之前选中的选项文本。
2. 表单默认值undefined与Select组件选中空值时返回的null类型不匹配，导致状态不同步。

具体修复步骤 #

1. 统一表单默认值类型

将默认值中的country改为null，和Select组件选中空值时返回的类型保持一致：

const defaultValues = {
  country: null,
};

2. 修正Select组件的value传递逻辑

在Controller的render函数中，给value添加空字符串兜底，适配原生select的字符串类型要求：

<Controller
  control={control}
  name='country'
  render={({ field: { onChange, value } }) => {
    return (
      <Select
        onSelect={onChange}
        options={countries}
        placeholder='Select country'
        value={value?.value ?? ''} // 用空字符串替代undefined
      />
    );
  }}
  rules={{
    required: {
      value: true,
      message: 'Country is required',
    },
  }}
/>

3. 完善Select组件的依赖数组（可选）

给useCallback添加onSelect依赖，避免闭包导致的状态更新异常：

const handleSelect = useCallback(
  (ev) => {
    const { value } = ev.target;
    const select = value ? options.find((opt) => opt.value === value) : null;
    onSelect(select);
  },
  [options, onSelect] // 补充onSelect到依赖数组
);

修复原理 #

• 原生HTML的<select>元素仅支持字符串类型的value，undefined无法匹配任何<option>的value，改用空字符串''后，Chakra UI的Select组件能正确识别为未选中状态，显示占位符。
• 统一默认值和空值返回类型为null，确保表单重置时状态完全同步。

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