React-Hook-Form调用form.reset()后Shadcn Select无法重置问题

核心问题原因 #

你同时维护了React-Hook-Form的表单状态和自定义的selectedDancers状态，调用form.reset()仅更新了RHF的表单状态，但未同步更新selectedDancers，且Shadcn UI的Select组件（基于Radix UI）内部状态未与RHF的重置动作联动，导致显示值未刷新。

具体解决方案 #

1. 移除冗余状态，统一依赖RHF管理 #

既然用RHF管理表单，无需额外维护selectedDancers，直接从RHF获取选中值即可，彻底避免状态不一致：

• 删除自定义的selectedDancers状态定义
• 修改选项过滤逻辑，用form.getValues()获取当前所有选中值：

  dancers.filter(dancer => {
    const formValues = form.getValues();
    // 过滤已被其他位置选中的舞者（当前位置的选中值除外）
    const selectedIds = Object.values(formValues).filter(v => v !== 'none');
    return !selectedIds.includes(dancer.id.toString()) || formValues[position] === dancer.id.toString()
  })
  

• 简化选择事件处理函数，仅保留RHF的状态更新：

  function onSelectDancer(field: any, dancerId: string) {
    field.onChange(dancerId);
  }
  

2. 强制Select与RHF状态同步 #

给Shadcn的Select组件绑定value属性，关联RHF的field.value，确保RHF重置时能同步更新Select内部状态：

<Select 
  value={field.value}
  onValueChange={(value) => onSelectDancer(field, value)}
>
  {/* 原有内容保持不变 */}
</Select>

3. 确认默认值匹配 #

确保defaultValues中每个position字段的初始值与Select的空选项value一致（比如设为'none'）：

const defaultValues = {
  '1st': 'none',
  '2nd': 'none',
  // 其他位置对应的默认值
};

修改后的关键代码片段 #

<FormField
  control={form.control}
  key={position}
  name={position}
  render={({ field }) => (
    <FormItem className="my-5">
      <FormLabel>{position} place</FormLabel>
      <Select 
        value={field.value}
        onValueChange={(value) => field.onChange(value)}
      >
        <FormControl>
          <SelectTrigger>
            <SelectValue
              placeholder="Please select a dancer / couple"
              {...field}
            />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          {dancers
            .filter(dancer => {
              const formValues = form.getValues();
              const selectedIds = Object.values(formValues).filter(v => v !== 'none');
              return !selectedIds.includes(dancer.id.toString()) || formValues[position] === dancer.id.toString()
            })
            .map(dancer => (
              <SelectItem
                key={dancer.id.toString()}
                value={dancer.id.toString()}
              >{Object.values(dancer).join(', ')}</SelectItem>
          ))}
          <SelectItem key='blank' value='none'>None</SelectItem>
        </SelectContent>
      </Select>
    </FormItem>
  )}
/>

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