react-hook-form结合Material-UI封装FormField组件失效问题排查

• 封装的FormField组件内部独立调用useForm()，每渲染一个字段就生成一个完全独立、和外层表单无关联的表单实例，所有字段状态都无法被AdressForm的提交逻辑捕获，提交时拿不到任何输入值
• 父组件AdressForm虽然导入了FormProvider，但并未将其作为上下文根组件包裹表单内容，没有建立跨组件的表单数据通道
• 细节适配问题：FormField没有接收外部传入的required参数，内部写死了required属性，之前传入的字符串形式的'required'属性也没有被组件识别

核心是打通父表单和子字段组件的control共享通道，提供两种可落地的方案，和参考教程的实现逻辑完全对齐：

方案1：上下文透传（无重复传参的最优封装方案） #

1. 调整父组件AdressForm：将useForm返回的所有方法通过FormProvider向下透传，替代原本单独在组件内取control的写法
   修正后核心代码：

   const AdressForm = ({next}) => {
     const formMethods = useForm()
     return (
       <>
         <Typography variant="h6" gutterBottom>Shipping Address </Typography>
         <FormProvider {...formMethods}>
           <form onSubmit={formMethods.handleSubmit((data) => console.log(data))}>
             <Grid container spacing={3}>
               <FormField name='firstName' label='First Name' required/>
               <FormField name='lastName' label='Last Name' />
               <FormField name='email' label='Email' />
               <FormField name='phoneNumber' label='Phone Number' />
             </Grid>
             <br/>
             <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                  <Button component={Link} to="/cart" variant="outlined">Back to Cart</Button>
                  <Button type="submit" variant="contained" color="primary">Next</Button>
             </div>
           </form>
         </FormProvider>
       </>
     )
   }
   

2. 调整子组件FormField：删除内部独立调用的useForm()逻辑，改用已导入的useFormContext从上下文中获取全局共享的control，同时支持外部传入required属性
   修正后核心代码：

   const FormField = ({name, label, required = false}) => {
     const { control } = useFormContext()
     return (
       <Grid item xs={12} sm={6} >
         <Controller 
           render={({field}) => 
             <TextField 
               {...field}        
               label={label} 
               required={required}
             />
           }
           name={name}
           control={control}
           defaultValue=""
         />
       </Grid>
     )
   }
   

方案2：直接prop传参（轻量场景适配） #

如果不需要上下文机制，直接从父组件把useForm返回的control作为prop传给FormField，删除FormField内部的独立useForm调用即可：

• 父组件调用时增加control参数传递：<FormField control={control} name='firstName' ... />
• 子组件接收control参数，直接绑定给Controller使用，不再自己创建表单实例

• 禁止在跨层级的子表单字段组件内部独立调用useForm()，否则会直接切断和外层表单的数据关联
• MUI的TextField的required属性是布尔值，不要传字符串形式的属性值

内容的提问来源于stack exchange，提问作者hegonen