Shadcn 使用表单内的 Select 组件不设置值

Question

所以我使用的是 Shadcn 的表单组件，其中包含

Input

、

Select

和

Checkbox

组件。

Input

和

Checkbox

组件工作正常，没有任何问题，这让我认为这与

Select

组件有关。

我已经设置了

FormSchema

:

const formSchema = z.object({
  title: z.string().min(1),
  firstname: z.string().min(1),
  lastname: z.string().min(1),
});

然后我设置

useForm

钩子：

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {},
});

然后我有一个 useEffect 来检查以确保我们已经从数据库中获取了用户信息，如果我们这样做的话，我设置表单的值：

useEffect(() => {
  if (dbUser) {
    form.setValue("title", dbUser.title);
    form.setValue("firstname", dbUser.firstname);
    form.setValue("lastname", dbUser.lastname);
  }
}, [dbUser]);

现在正如我提到的

firstname

和

lastname

是输入，这工作正常，但

title

是一个

Select

组件：

<FormField
    control={form.control}
    name="title"
    render={({ field }) => {
      return (
        <FormItem>
          <FormLabel>Title</FormLabel>
          <Select
            onValueChange={field.onChange}
            defaultValue={field.value}
            value={field.value}
          >
            <FormControl>
              <SelectTrigger>
                <SelectValue placeholder="Select" />
              </SelectTrigger>
            </FormControl>
            <SelectContent>
              <SelectItem value="Doctor">Doctor</SelectItem>
              <SelectItem value="Mr">Mr</SelectItem>
              <SelectItem value="Mrs">Mrs</SelectItem>
              <SelectItem value="Miss">Miss</SelectItem>
            </SelectContent>
          </Select>
          <FormMessage />
        </FormItem>
      );
    }}
  />

调试问题时，如果我使用标准

router.push

导航到页面，则

Select

组件将不会填充，而当我刷新页面时，

Select

组件确实选择了正确的值？

Answer 1

建议，删除useEffect，你可能不需要它。删除默认值。

https://react.dev/learn/you-might-not-need-an-effect

const MyComponent = () => {
 let initialFormValues = {
 ...emptyFormValues
 };

 if(dbUser) {
  initialFormValues = {...dbUser};
 }
}


const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  values: initialFormValues,
});