Блог

Я получаю неопределенное значение после отправки формы с некоторыми текстовыми полями. Я совершенно озадачен этим вопросом, поэтому я привел ниже некоторый код. Я использую форму React Hook 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
 

Похоже, в строке 2 1-го фрагмента кода есть проблема, она должна быть

 const { control } = useFormContext();
 

Кроме того, control следует передавать в качестве реквизита Controller вместо TextField . Обратитесь к этому.