setState() — это асинхронная операция. React группирует изменения состояния для оптимизации производительности, то есть состояние может обновиться не сразу после вызова setState(). Ты не можешь надёжно полагаться на текущее значение состояния, когда делаешь несколько последовательных обновлений.
Когда ты напрямую обращаешься к this.state в нескольких вызовах setState(), каждый вызов читает одно и то же значение состояния до того, как какие-либо обновления применятся. Это приводит к тому, что обновления состояния перезаписывают друг друга вместо того, чтобы накапливаться.
// Начальное состояние: count = 0
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
// Результат: count = 1 (а не 3)
Все три вызова читают count как 0, поэтому каждый устанавливает его в 1, перезаписывая предыдущие обновления.
Передай функцию-коллбэк в setState(), которая получит предыдущее состояние как аргумент. Это гарантирует, что каждое обновление будет работать с самым актуальным значением состояния.
this.setState((prevState, props) => ({
count: prevState.count + props.increment
}))
// Результат: count = 3 (как и ожидалось)
Функциональная форма гарантирует, что обновления состояния последовательны и предсказуемы, даже если несколько вызовов setState() происходят один за другим. Каждое обновление строится на основе предыдущего, а не перезаписывает его.
Когда ты передаёшь функцию в setState(), эта функция получает предыдущее состояние как первый аргумент, что гарантирует, что обновления будут основаны на самом свежем значении состояния, а не на устаревшем.
Новый — ещё не проверен сообществом
Вы