我对如何将 watch
的类型声明为 Prop 感到困惑。这是一个例子:
// pages/FormContainer.tsx
import { useForm, useWatch } from "react-hook-form";
import FormView from "./FormView";
interface FormInputs {
firstName: string;
lastName: string;
age: number;
}
const FormContainer = () => {
const { control, register } = useForm<FormInputs>({
defaultValues: {
firstName: "Jon",
lastName: "Doe",
age: 24
}
});
const formData = useWatch({ control });
return <FormView register={register} formData={formData} />;
};
export default FormContainer;
// pages/FormView.tsx
import { UseFormReturn } from "react-hook-form";
interface Props {
register: UseFormReturn["register"];
formData: UseFormReturn["watch"];
}
const FormView = ({ formData }: Props) => {
return (
<div>
<h1>
My Name: {formData.firstName} {formData.lastName}
</h1>
<h2>I am {formData.age} years old</h2>
</div>
);
};
export default FormView;
问题是 typescript 在这个 formData={formData}
prop 上向我显示错误
这里我提供了一个sandbox清楚我的意思
最佳答案
UseFormReturn["watch"]
会给你返回 watch
的类型函数本身——即这个函数的类型:
// `watch` here is of type `UseFormReturn["watch"]
const { control, register, watch } = useForm<FormInputs>({
// ...
});
作为引用,这个watch
的返回类型功能是 UnpackNestedValues<TFormValues>
.
但是 - 您没有使用该功能,您使用的是 useWatch
它返回一个略有不同的 UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>>
.因此,您可以将表单类型更改为:
import { UnpackNestedValue, UseFormReturn, DeepPartialSkipArrayKey } from "react-hook-form";
import { FormInputs } from "./FormContainer";
interface Props {
register: UseFormReturn["register"];
formData: UnpackNestedValue<DeepPartialSkipArrayKey<FormInputs>>
}
或者,由于您的表单对象(至少在本例中)非常“简单”(实际上只是键/值对),您可以使用更简单的类型声明 Partial<FormInputs>
在这种情况下,这在功能上是等效的。
关于reactjs - react-hook-form v7 `watch` 输入 typescript ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70415838/