Javascript React-Hook表单-对于React-Hook表单v7.5.2，在单个页面上不适用于多个表单的错误

对于react hook form的早期版本，如果您使用以下代码行创建了另一个form对象，则使用多个表单：

    const { 
    register: register2,
    handleSubmit: handleSubmit2,
    errors: errors2
  } = useForm()

现在，当语法更改为formState时，第二个表单的errors对象不会被创建，它会抛出一个错误

const { 
    register: register2,
    handleSubmit: handleSubmit2,
    formState: { errors2 } 
  } = useForm()

我的完整代码如下：

import { useForm } from 'react-hook-form'
import { useState } from 'react'
function App() {

  const [firstname,setFirstName] = useState(null)
  const [lastname,setLastName] = useState(null)
  const [email,setEmail] = useState(null)
  const [address,setAddress] = useState(null)
  const { register, handleSubmit , formState: { errors } } = useForm()
  const { 
    register: register2,
    handleSubmit: handleSubmit2,
    formState: { errors2 } 
  } = useForm()

  const handleInputChange = (e) =>{

        const target = e.target
        const name = target.name

        if(name === 'firstname'){
          setFirstName(target.value)
        }
        if(name === 'lastname'){
          setLastName(target.value)
        }
        if(name === 'email'){
          setEmail(target.value)
        }
        if(name === 'address'){
          setAddress(target.value)
        }


  }

  const submitData = async()=>{

      console.log(firstname,lastname)

  }
  const submitData2 = async()=>{

    console.log(email,address)

}
  return (
    <div className="App">
      <form key={1} onSubmit={handleSubmit(submitData)}>
        <input name='firstname' type="text" {...register('firstname',{required:true})} onChangeCapture={handleInputChange} placeholder="enter firstname" />
        <p>{errors.firstname && "First Name is Required"}</p>
        <input name='lastname' type="text"{...register('lastname',{required:true})} onChangeCapture={handleInputChange}  placeholder="enter lastname" />
        <p>{errors.lastname && "Last Name is Required"}</p>
        <button type="submit"> submit </button>
      </form>
      <hr />
      <form key={2} onSubmit={handleSubmit2(submitData2)}>
      <input name='email' type="text" {...register2('email',{required:true})} onChangeCapture={handleInputChange} placeholder="enter firstname" />
      <p>{errors.email && " Email is Required"}</p>
      <input name='address' type="text"{...register2('address',{required:true})} onChangeCapture={handleInputChange}  placeholder="enter lastname" />
      <p>{errors.address && "Address is Required"}</p>
      <button type="submit"> submit </button>
    </form>
      
    </div>
  );
}

export default App;

从'react hook form'导入{useForm}
从“react”导入{useState}
函数App（）{
const[firstname，setFirstName]=useState（null）
const[lastname，setLastName]=useState（null）
const[email，setEmail]=useState（null）
常量[address，setAddress]=useState（null）
const{register，handleSubmit，formState:{errors}}=useForm（）
常数{
注册人：注册人2，
handleSubmit:handleSubmit2，
formState:{errors2}
}=useForm（）
常量handleInputChange=（e）=>{
常数目标=e.target
const name=target.name
如果（名称=='firstname'）{
setFirstName（target.value）
}
如果（名称=='lastname'）{
setLastName（target.value）
}
如果（名称=='电子邮件'）{
setEmail（target.value）
}
如果（名称=='地址'）{
setAddress（target.value）
}
}
常量submitData=async（）=>{
console.log（firstname，lastname）
}
const submitdata=async（）=>{
console.log（电子邮件、地址）
}
返回(
{errors.firstname&&“需要名字”}

{errors.lastname&&“需要姓氏”}

提交

{errors.email&&“需要电子邮件”}

{errors.address&&“需要地址”}

提交
);
}
导出默认应用程序；

这是我的输出屏幕截图：

第一个表单会触发错误，但第二个表单不会显示错误。反应钩v7.5.2

---

请帮忙

这里的问题是如何分解

formState

。尝试这种方法，它应该会起作用：

const{
注册人：注册人2，
handleSubmit:handleSubmit2，
formState:{errors:errors2}
}=useForm（）