Почему мое состояние не обновляется сразу в журнале консоли

Question

Я изучаю React и React Hooks, и у меня есть вопрос. У меня есть это состояние под названием комнаты, которое содержит массив комнатных объектов. Я создал компонент, который добавляет новую комнату. Вы заполняете форму, и когда нажимаете кнопку отправки, она запускает функцию, где я редактировал состояние с помощью setRooms ([... rooms, newRoom]), и в то же время обновляет комнаты на странице. По какой-то причине, когда я пытаюсь войти в консоль (в той же функции onSubmit, которая редактировала комнаты в первый раз), он показывает предыдущее состояние, даже если он должен быть обновлен, и я могу сказать, что он обновлен, потому что новая комната отображается на странице.

Пожалуйста, помогите мне понять это, я не могу обернуться вокруг него.

Answer 1

Это, безусловно, потому что состояние rooms еще не было обновлено, когда вы console.log его.

Вы должны иметь в виду, что useState является assyncronus, то есть измененное значение не отражается мгновенно.

Если вы сделаете:

const handleSubmit = (newRoom) => {
  setRooms([...rooms, newRoom])
  console.log(rooms)
  // Possibly won't get the desired result
}

Но как React , когда состояние изменяется, оно повторяется. Вы можете поместить console.log в любом месте перед возвращением (для функции рендеринга, если это класс)

const Component = () => {
  const handleSubmit = (newRoom) => {
    setRooms([...rooms, newRoom])
  }

  console.log(rooms)
    // Possibly you will get the desired result

  return (
     ..your component JSX
  )
}

Answer 2

Действия setState являются асинхронными и пакетируются для повышения производительности. Это объясняется в документации setState.

setState () не изменяет немедленно this.state, но создает переход состояния ожидания. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение. Нет гарантии синхронной работы вызовов setState, и вызовы могут быть сгруппированы для увеличения производительности.

Следовательно, хотя вашему setState () присваивается последнее значение номеров, требуется время, чтобы обновить его к этому времени , ваш console.log будет напечатан. Следовательно, вы не видите обновленные значения, обращаясь к this.state в консоли сразу после установки состояния.

Если вы хотите понять, почему setState () является асинхронным, здесь ссылка на стекопоток - Ссылка