react-hook-form 控制器和 ShadeCn 选择组件的问题：选择时值重置为空字符串

Question

我正在开发一个 React 项目，使用 react-hook-form 以及 Controller 组件来管理带有 Select 组件的表单。但是，我遇到了一些问题：

初始表格提交：

当我在不与 Select 组件交互的情况下提交表单时，一切都按预期工作，并且默认值已正确提交。

选择后发出：

如果我与任何 Select 组件（例如 propertyType）交互并进行选择，则提交的表单数据中该字段的值将变为空字符串。 占位符问题：

SelectTrigger 不显示默认值或选定的选项。它仅在进行选择后显示占位符文本（“选择属性类型”），即使如此，它也不会显示正确的选项。

我的代码：

"use client";

import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";

const formSchema = z.object({
  location: z.string().min(1, "Location is required"),
  propertyType: z.string(),
  purpose: z.string(),
  priceRange: z.string(),
  beds: z.string(),
  filters: z.string(),
});

const propertyTypeOptions = [
  { value: "residential", label: "All in Residential" },
  // Add more options as needed
];

export default function PropertyFilter() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      location: "",
      propertyType: propertyTypeOptions[0].value,
      purpose: "rent",
      priceRange: "any",
      beds: "any",
      filters: "baths-area",
    },
  });

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="form-container">
        
        <FormField
          control={form.control}
          name="propertyType"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Property Type</FormLabel>
              <FormControl>
                <Controller
                  name="propertyType"
                  control={form.control}
                  render={({ field }) => (
                    <Select
                      onValueChange={field.onChange}
                      value={field.value}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select a property type" />
                      </SelectTrigger>
                      <SelectContent>
                        {propertyTypeOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <button type="submit">Submit</button>
      </form>
    </Form>
  );
}

• 预期行为：

SelectTrigger 应正确显示所选选项或默认值。 提交的表单数据应包含选择后来自选择组件的正确值。

• 实际行为：

SelectTrigger 最初不显示任何文本。 选择选项后，表单数据包含该字段的空字符串。

Answer 1

我刚刚遇到了与您在完全相同的用例中描述的完全相同的问题。看起来我在

SelectItem

中自定义了

components/ui/select.tsx

组件。我删除了默认的

SelectPrimitive.ItemText

，包裹了

children

。

我想你应该检查一下你是否犯了同样的错误