Есть ли способ улучшить функциональный компонент с помощью хуков?

Question

Поэтому я решил попробовать React Hooks. У меня есть компонент, который содержит кучу логик, таких как проверка формы и отправка формы, как показано ниже:

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

Приведенный выше код выглядит немного раздутым и, по моему мнению, немного сложным в обслуживании. Есть ли способ улучшить функцию handleSubmitButton, чтобы абстрагировать часть ее кода в отдельную функцию из компонента MyAwesomeComponent?

Answer 1

С одной стороны, вы могли бы сделать

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

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

Другими словами, зачем делать это в два отдельных шага? Кстати, если вы этого не видели, !! - это «нет», которое преобразует истинное или ложное значение в фактическое истинное или ложное.