嘿，这实际上是更改您的 on change 函数并使用如下值的问题：

interface IAddProductForm {
  category: string;
}

interface ICategory {
  value: string;
  label: string;
}

function YourComp() {
const { handleSubmit, control, formState:{errors}} = useForm<IAddProductForm>();

    const handleOnSubmit = (data:IAddProductForm) => {
        console.log(data);
    }

    const categoryOptions: ICategory[] = [
        {value:"Grocery", label:"Grocery"},
        {value:"Pharmacy", label:"Pharmacy"},
        {value:"Electronic", label:"Electronic"},
        {value:"Food", label:"Food"},
    ];

    return(
        <React.Fragment>
           <Form onSubmit={handleSubmit(handleOnSubmit)}>
               <Controller
                   control={control}
                   render={({ field: { onChange, value, name, ref } }) => (
                     <Select
                      inputRef={ref}
                      value={categoryOptions.find((c) => c.value === value)}
                      name={name}
                      options={categoryOptions}
                      onChange={(selectedOption: ICategory) => {
                       onChange(selectedOption.value);
                      }}
                     />
                   )}
                   name={"category"}
                />
               <Button type={"submit"}>submit</Button>
            </Form>
        </React.Fragment>
);
}

如果您仔细看一下，我只是为 categoryOptions const 添加了一些类型，以便能够键入 onChange 函数并将其修改为如下所示。

onChange={(selectedOption: ICategory) => {
 onChange(selectedOption.value);
}}

基本上接收到的值是完整的对象，您只需要提取它的值并将其传递给控制器​​的 onChange 函数。此外，您通过传递值并使用数组 find 来匹配对象并使选择正常工作是正确的。

如果您提交，您应该能够看到 formData 仅返回带有字符串值的类别，而不是对象。

这是一个工作沙箱：https ://codesandbox.io/s/boring-blackwell-qoer1