Как изменить состояние объекта в useState??

Question

[San Manjiro]

У меня есть useState, который в зависимости от булева значение отрендеривает компонент:

const [questionnaireSteps, setQuestionnaireSteps] = useState({
    contactUs: true, // контактная информация - 1-я форма
    phoneNumberVerification: false, // подтверждение номера телефона - код из смс
    passportDetails: false, // паспортные данные - 2-я форма
    employmentAndIncome: false, // занятость и доходы - 3-я форма
  })

Вот сами компоненты:

{ questionnaireSteps.contactUs === true
    ? <StepOneForm
        statusStepOneForm={(value) => {setQuestionnaireSteps({...questionnaireSteps, contactUs: value}); console.log(value)}}
        statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
        phoneNumber={setPhoneNumber}
    /> : undefined }
{ questionnaireSteps.phoneNumberVerification === true
    ? <ModalDialog
        phoneNumber={phoneNumber}
        statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
        statusStepOneForm={(value) => setQuestionnaireSteps({...questionnaireSteps, contactUs: value})}
        setStatusStepTwoForm = { (value) => setQuestionnaireSteps({...questionnaireSteps, passportDetails: value}) }
    /> : undefined }
{ questionnaireSteps.passportDetails === true
    ? <StepTwoForm
        statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
        statusStepTwoForm={(value) => setQuestionnaireSteps({...questionnaireSteps, passportDetails: value})}
        statusStepThreeForm={(value) => setQuestionnaireSteps({...questionnaireSteps, employmentAndIncome: value})}
    /> : undefined }
{ questionnaireSteps.employmentAndIncome === true
    ? <StepThreeForm
        statusStepTwoForm={(value) => setQuestionnaireSteps({...questionnaireSteps, passportDetails: value})}
        statusStepThreeForm={(value) => setQuestionnaireSteps({...questionnaireSteps, employmentAndIncome: value})}
    /> : undefined }

Проблема заключена здесь:

statusStepOneForm={(value) => {setQuestionnaireSteps({...questionnaireSteps, contactUs: value}); console.log(value)}}

В консоль выводит значение false, соответственно в стейте contactUs должен был стать false и скрыться, но если вызывать useEffect, то выводя список объектов можно увидеть что contactUs все равно остается true:

contactUs: true
employmentAndIncome: false
passportDetails: false
phoneNumberVerification: true

Я знаю что такая ошибка связана с перередером компонентов и не знаю как её решить. Заранее спасибо.

Answer 1

[historydev]

Во первых:

{ questionnaireSteps.contactUs && (<StepOneForm
        statusStepOneForm={(value) => {setQuestionnaireSteps({...questionnaireSteps, contactUs: value}); console.log(value)}}
        statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
        phoneNumber={setPhoneNumber}
    />)}

Во вторых:

const myFunc = (type, value) => {
     console.log(value)
     if(type === 'step') setQuestionnaireSteps({...questionnaireSteps, contactUs: value});
     if(type === 'sms') (value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})
};
{ questionnaireSteps.contactUs && (<StepOneForm
        statusStepOneForm={value => myFunc('step', value)}
        statusSmsPhone={value => myFunc('sms', value)}
        phoneNumber={setPhoneNumber}
    />)}

В третьих что передаётся в это value и откуда?

Comments

[San Manjiro]

это value передает пропсовое значение из компонента StepOneForm. Вот как оно передается:

const onSubmit = (data) => {
    props.statusStepOneForm(false)
    props.statusSmsPhone(true)
 }

У меня там есть форма, которая отправляется по нажатию, и когда срабатывает форма выполняется onSubmit. Который передает false в родитель, а в родителе я его должен принять и записать в объект contactUs, который в стейте хранится.

[San Manjiro]

Сделал как вы написали выше, myFunc вернул мне false и true. Как я понял первое это относится к contactUs, а второе к phoneNumberVerification. Также посмотрел на состояние объекта, но contactUs, по прежнему true. Хотя в него должен был передаться false.
Объект:

contactUs: true
employmentAndIncome: false
passportDetails: false
phoneNumberVerification: false

[historydev]

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

const myFunc = useCallback((type, value) => {
     console.log(value)
     if(type === 'step') setQuestionnaireSteps(prev => {
        prev.contactUs = value;
        return prev;
     });
     if(type === 'sms') (value) => setQuestionnaireSteps(prev => {
        prev.phoneNumberVerification = value;
        return prev;
     })
}, [setQuestionnaireSteps]);

Мне лень запускать это на playground, могу где-то опечатку допустить, если будет ошибка, напишите

[San Manjiro]

Владимир, хах, спасибо за рефакторинг )) А то когда сидишь программируешь больше суток, вообще ничего не вдупляешь. А так, спасибо вам за ваш ответ, я уже ранее пробовал использовать useCallback, но не додумался обновлять состояние иначе. Насчет ошибок - они есть ) т.к. questionnaireSteps это объект, значит и принимать он должен тоже объект, код будет выглядеть немного иначе:

const myFunc = useCallback((type, value) => {
    console.log(value)
    if(type === 'step') setQuestionnaireSteps(prev => {
      return {...prev, contactUs: value}
    });
    if(type === 'sms') setQuestionnaireSteps(prev => {
      return {...prev, phoneNumberVerification: value}
    })
}, [setQuestionnaireSteps]);

И ещё хочу задать вопрос вам насчет состояния, я уже ранее его менял немного другим способом, а точнее:

onChange: (event) => setPassport({...passport, placeOfIssue: event.target.value})

, и тогда все работал, так что же сейчас поменялось?

[historydev]

San Manjiro, контекст вызова какой?

[San Manjiro]

Владимир, изменения состояние в инпуте

[historydev]

San Manjiro, в первом случае вы подписаны только на рендер, во втором на изменения в инпуте, поэтому в первом нужен useCallback, а во втором нет

[San Manjiro]

Владимир, я правильно понял, useCallback нужен что не терять объект и перердоривать его от какой-то зависимости?

[historydev]

San Manjiro, https://www.w3schools.com/react/react_usecallback.asp