Как перезаписывать объекты в useState?

Question

[San Manjiro]

Не получается установить строковое значение в объект useState.
Есть handlerSetPlaceOfIssue, который принимает value:

const handlerSetPlaceOfIssue = (value) => {
    console.log(value)
    setPassport({...passport, placeOfIssue: value})
    console.log(passport.placeOfIssue)
 }

Первый консоль лог выводит в консоль значение, тут же я его устанавливаю и пытаюсь вывести, но выводится пустая строка:

Вот объект useState если что:

const [passport, setPassport] = useState({
    series: "", // серия паспорта
    number: "", // номер паспорта
    dateOfBirth: "", // дата рождения
    passportIssueDate: "", // дата выдачи паспорта
    ouCode: "", // код подразделения
    placeOfBirth: "", // место рождения
    placeOfIssue: "" // паспорт выдан
 })

Comments

[HealSpirit]

Стейт обновится при следующем ререндере. Читайте почему установка стейта асихронна. А сейчас он вывел первоначальное значение - пустую строку

[San Manjiro]

HealSpirit, что я могу сделать в этом случаи?

[Александр]

San Manjiro, useEffect(() => console.log(state), [state]);

[San Manjiro]

Александр, Все равно не понимаю в чем проблема, почему ouCode устанавливается в объект и я его вижу, а placeOfIssue нет.

useEffect (() => {
    PlaceOfIssueScript(
      (value) => setPassport({...passport, placeOfIssue: value}),
      (value) => setPassport({...passport, ouCode: value.replace(/[^0-9]/g, '')}),
      setStatusSelec
    )
  }, [passport])
  useEffect(() => console.log(passport), [passport])

{series: '', number: '', dateOfBirth: '', passportIssueDate: '', ouCode: '220001', …}
dateOfBirth: ""
number: ""
ouCode: "220001"
passportIssueDate: ""
placeOfBirth: ""
placeOfIssue: ""
series: ""
[[Prototype]]: Object

Answer 1

[viarmo]

Попробуй вывести в консоль не поле, а сам объект. Дело в том, что состояние обновляется только после перерендера компонента. Если нужно получить доступ к уже обновлённому объекту после перерендера, нужно использовать хук useEffect.

Comments

[San Manjiro]

Все равно не понимаю в чем проблема, почему ouCode устанавливается в объект и я его вижу, а placeOfIssue нет.

useEffect (() => {
    PlaceOfIssueScript(
      (value) => setPassport({...passport, placeOfIssue: value}),
      (value) => setPassport({...passport, ouCode: value.replace(/[^0-9]/g, '')}),
      setStatusSelec
    )
  }, [passport])
  useEffect(() => console.log(passport), [passport])

{series: '', number: '', dateOfBirth: '', passportIssueDate: '', ouCode: '220001', …}
dateOfBirth: ""
number: ""
ouCode: "220001"
passportIssueDate: ""
placeOfBirth: ""
placeOfIssue: ""
series: ""
[[Prototype]]: Object

Answer 2

[San Manjiro]

Решил я эту проблему, заключалась она в том, что я о приоре не правильно записывал значения в объект, нужно было писать не setPassport({...passport, placeOfIssue: value}), а что-то вроде такого:

useEffect (() => {
    PlaceOfIssueScript(
      (value) => setPassport(prevState => {
        return {...prevState, placeOfIssue: value }
      }),
      (value) => setPassport(prevState => {
        return {...prevState, ouCode: value.replace(/[^0-9]/g, '') }
      }),
      setStatusSelec
    )
  }, [passport])

Я не знаю почему не работал предыдущий способ, потому что по факту, мы делаем то же самое, берем наши объект и применяем на них спрутинг, а потом изменяем то значение в объекте, которое нам нужно изменить.