React Hook 表单和 Material UI 的 TextField 中的不受控输入到受控输入警告

Question

我正在尝试使用 React Hook Form（版本 7.6.6）构建一个表单。我创建了一个 FormInput 组件，如下所示：

const FormInput = ({ name, label }) => {
  const { control } = useFormContext();

   return (
    <Grid item xs={12} sm={6}>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return <TextField {...field} label={label} fullWidth required />;
        }}
      />
    </Grid>
  );

我在这里使用它：

<FormProvider {...methods}>
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <FormInput name="firstName" label="First Name" />
            <FormInput name="lastName" label="Last Name" />
            <FormInput name="address1" label="Address 1" />
            <FormInput name="email" label="Email" />
            <FormInput name="zip" label="ZIP code" />
       
         
          <Button
            type="submit"
            Continue to Payment
          </Button>
        </form>
</FormProvider>

但是，我收到一条错误消息

警告：组件正在将不受控制的输入更改为受控制...

我已经检查过 React Hook Form 文档，但似乎找不到导致警告的原因。我究竟做错了什么？

谢谢你！

Answer 1

我认为你的问题与这个类似。

ReactJS 中组件正在将文本类型的不受控输入更改为受控错误

这不是与钩子相关的问题。在我看来，如果输入没有值属性，或者当值首先被指定为未定义时，则将其视为不受控制的输入。所以我想建议2个解决方案。

1) 设置默认值

<Controller
    defaultValue = {''}
    ...
/>

2）检查上下文值
检查初始上下文值并像这样更新它们。

data: {} => data: { field1: '', field2: ''}