update form条件字段需刷新/切Tab才显示的问题求助

问题根源 #

1. 表单初始值未同步异步数据：useQuery 异步拉取数据时，表单初始化阶段 dataEvent 还未返回，导致 meetingTypeOption 默认值未正确设置，watch 初始为 undefined。
2. 条件判断依赖静态数据：当前用 dataEvent?.meetingOption 判断字段显示，但 dataEvent 是数据库返回的静态数据，不会随表单值变化更新，仅在组件重新挂载（切换标签/刷新）时才会重新读取。
3. watch 使用方式错误：直接赋值 let watchEvent = form.watch('meetingTypeOption') 无法触发组件响应式重渲染，需用 useWatch 钩子或结合 useEffect 监听字段变化。

修复步骤 #

1. 同步表单初始值到异步数据 #

当 dataEvent 加载完成后，通过 form.reset 更新表单值，确保初始值与数据库数据一致：

const { data: dataEvent, isLoading: isLoadingEvent } = useQuery({
  queryKey: ["edit", id],
  queryFn: async () => await getDataById(id),
});

const form = useForm<Events>({
  resolver: zodResolver(formSchemaData),
  defaultValues: { meetingTypeOption: undefined }
});

// 数据加载完成后重置表单值
useEffect(() => {
  if (dataEvent) {
    form.reset({
      ...form.getValues(),
      meetingTypeOption: dataEvent.meetingTypeOption as any
    });
  }
}, [dataEvent, form]);

2. 用表单实时值做条件判断 #

替换 dataEvent 为表单 watch 到的实时值，确保表单值变化时立即触发重渲染：

import { useWatch } from 'react-hook-form';

// 使用useWatch获取实时字段值
const watchMeetingType = useWatch({
  control: form.control,
  name: 'meetingTypeOption'
});

// 条件字段判断改用watch到的实时值
{watchMeetingType === 'webinar' && (
  <div>
    {/* Webinar对应的字段内容 */}
  </div>
)}

{watchMeetingType === 'meeting' && (
  <div>
    {/* Meeting对应的字段内容 */}
  </div>
)}

3. 修复Select组件与表单的绑定 #

移除自定义 onValueChange，直接使用React Hook Form提供的 field 绑定，确保值同步：

<FormField
  control={form.control}
  name="meetingTypeOption"
  render={({ field }) => (
    <FormItem className="w-full">
      <FormLabel>Type of Service</FormLabel>
      <Select
        value={field.value}
        onValueChange={field.onChange}
      >
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder="Select a meeting type" />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value="meeting">Zoom Meeting</SelectItem>
          <SelectItem value="webinar">Zoom Webinar</SelectItem>
          <SelectItem value="hybrid">Hybrid</SelectItem>
          <SelectItem value="documentation">Documentation</SelectItem>
          <SelectItem value="training">Training</SelectItem>
        </SelectContent>
      </Select>
      <FormMessage />
    </FormItem>
  )}
/>

额外说明 #

• useWatch 是React Hook Form专为监听字段变化设计的钩子，能保证组件在字段值变更时及时重渲染，比直接调用 form.watch 更适合在JSX中做条件判断。
• 移除Select的 defaultValue，因为React Hook Form的 field.value 会自动处理初始值与后续更新逻辑。

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