在 React 钩子形式和材质 UI 的文本字段中对受控输入警告的不受控制的输入

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 中要控制的文本类型的非受控输入错误

这与挂钩无关。在我看来，如果一个输入没有值属性，或者当

的值1(设置默认值

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

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

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