React. Изменения нескольких useState после submit-а формы

Question

Имеется некая форма(построена на react-hook-form), после заполнения всех необходимых полей и нажатия на кнопку вызывается функция SubmitForm, которая проверяет, все ли поля заполнены, если да - то изменяются два стейта(setAllUserInfo(data) && setFormValid(true)), которые передаются отдельному компоненту(ModalOrder). Но проблема в том, что изменяется только самый первый стейт, второй не изменяется. Как это исправить?

    const {register, handleSubmit, getValues, setValues, watch, formState: { isValid, isDirty}, errors} = useForm({ defaultValues })
    const [allUserInfo, setAllUserInfo] = useState(null)
    const [formValid, setFormValid] = useState(false)

    const submitForm = (data) => {
        return isValid ? setAllUserInfo(data) && setFormValid(true) : null
    }

    return (
        <>
            <form onSubmit={handleSubmit(submitForm)}>
                 ...
            </form>
            <ModalOrder isOpen={formValid} data={allUserInfo}/>
       </>
   )

Answer 1

Конструкция тернарника не предназначена для вызовов функций, для этого используют if/else конструкции более того функции сеттеры хуков ассинхронные операции и не гарантируют даже последовательность исполнения (на выбор Реакта) и они ничего не возвращают.

const submitForm = (data) => {
   if (isValid) {  
     setAllUserInfo(data)
     setFormValid(true)
   }
   return 
 }

БЛОГ НА HUSL

React. Изменения нескольких useState после submit-а формы

Ответы (1 шт):