Reactjs 有没有办法使用钩子来改进功能组件？

所以我决定试一试。 我有一个组件，其中包含一系列逻辑，如表单验证和表单提交，如下所示：

const MyAwesomeComponent: React.FC = ()=> {

   const [firstName, setFirstName]=useState('')
   const [lastName, setLastName]=useState('')
   const [formValidation, setFormValidation] = useState({
      firstName: true,
      lastName: true
   })

   const handleSubmitForm = (evt: React.FormEvent)=> {
      evt.preventDefault();
      handleSubmitButton()
   }

   const handleSubmitButton = ()=> {
      let formBody = {}

      if(!firstName) {
        setFormValidation({...formValidation, firstName: false})
      } else {
         formBody = {...formBody, {firstName}}
      }

      if(!lastName) {
        setFormValidation({...formValidation, lastName: false})
      } else {
         formBody = {...formBody, {lastName}}
      }

      // Nice proceed and submit the form to the backend
   }


   return (
      <form onSubmit={(evt)=>handleSubmitForm(evt)}>
        {/* form inputs go here */}
        <button onClick={()=>handleSubmitButton()}></button>
      </form>
   )
}

export default MyAwesomeComponent

const MyAwesomeComponent:React.FC=（）=>{
const[firstName，setFirstName]=useState（“”）
const[lastName，setLastName]=useState（“”）
常量[formValidation，setFormValidation]=useState({
名字：真的，
姓：真
})
const handleSubmitForm=（evt:React.FormEvent）=>{
evt.preventDefault（）；
handleSubmitButton（）
}
常量handleSubmitButton=（）=>{
设formBody={}
如果（！firstName）{
setFormValidation（{…formValidation，firstName:false}）
}否则{
formBody={…formBody，{firstName}
}
如果（！lastName）{
setFormValidation（{…formValidation，lastName:false}）
}否则{
formBody={…formBody，{lastName}
}
//继续并将表单提交到后端
}
返回(
handleSubmitForm（evt）}>
{/*表单输入转到此处*/}
handleSubmitButton（）}>
)
}
导出默认MyAwesomeComponent

---

在我看来，上面的代码有点臃肿，维护起来有点困难。有没有办法改进

handleSubmitButton

函数，以便将其部分代码从

MyAwesomeComponent

组件中抽象为单独的函数？

首先，您可以这样做

   const handleSubmitButton = ()=> {
      let formBody = {firstName, lastName}
      setFormValidation({firstName: !!firstName, lastName: !!lastName});

      // Nice proceed and submit the form to the backend
   }

换句话说，为什么要分两步来做呢？顺便说一句，如果你还没有看到它，

是“not not”，它将真值或假值转换为实际的真值或假值