React hook表单在提交时返回undefined

Question

在提交带有一些文本字段的表单后，我得到一个未定义的值。我对这个问题很困惑，所以我在下面提供了一些代码。我正在使用React Hook Form 7.11.1谢谢你的帮助!

const FormInput = ({ name, label, required, defaultValue, InputProps }) => {
const { control } = useFormContext;
return (
<Grid item xs={12} sm={6}>
<Controller
render={() => (
<TextField
control={control}
fullWidth
name={name}
label={label}
required={required}
defaultValue={defaultValue}
InputProps={InputProps}
></TextField>
)}
/>
</Grid>
);
};

<FormProvider {...methods}>
<form
onSubmit={methods.handleSubmit((data) =>
setShippingData({ ...data })
)}
>
<Typography variant="h6">Billing Address</Typography>
<Grid container spacing={3}>
<FormInput required name={"firstName"} label={"First Name"} />
<FormInput required name={"lastName"} label={"Last Name"} />
<FormInput required name={"address"} label={"Billing Address"} />
<FormInput required name={"email"} label={"Email"} />
<FormInput required name={"city"} label={"City"} />
<FormInput required name={"zip"} label={"Postal Code"} />
</Form

Answer 1

在第一个代码片段的第2行似乎有一个问题，它应该是

const { control } = useFormContext();

并且，control应该作为道具传递给Controller，而不是TextField。参考。