React Hook Form - 对于 React Hook Form v7.5.2，在单个页面上无法处理多个表单的错误

Question

对于以前版本的 react hook form，如果您使用以下代码行创建另一个表单对象，则多个表单过去可以工作：

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

现在将语法更改为 formState，不会创建第二个表单的错误对象，它会引发错误。

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;

这是我的输出截图：

第一种形式会触发错误，但第二种形式不会显示错误。反应挂钩 v7.5.2 请帮忙!!!!

Answer 1

这里的问题是你解构 formState 的方式。试试这个方法，它应该可以工作：

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

React Hook Form - 对于 React Hook Form v7.5.2，在单个页面上无法处理多个表单的错误

React Hook Form - Errors not working for multiple forms on a single page for react hook form v7.5.2

javascript

forms

validation

reactjs

react-hook-form