Я часто видел, как некоторые начинающие разработчики React совершают одну распространенную ошибку, которая заключается в обновлении состояния React.
Как вы обновляете свое состояние, если оно зависит от предыдущего значения? Если вы используете описанный ниже метод для обновления состояния React, значит, вы делаете это неправильно!
const [counter, setCounter] = useState(0);
const updateCounter = () => {
setCounter( counter + 1 );
}Хотя описанный выше метод будет работать, это может быть не лучший подход.
В официальной документации React упоминается: 'this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для расчета следующего состояния».
Итак, каков наилучший подход?
Чтобы справиться с этой ситуацией, React позволяет нам передать функцию в setState, которая даст нам предыдущее значение состояния.
Здесь React гарантирует нам, что значение всегда корректно обновляется.
const [counter, setCounter] = useState(0);
const updateCounter = () => {
setCounter((prevState) => {
// some logic
return prevState + 1;
});
}Расскажите, пожалуйста, в комментарии, сталкивались ли вы когда-нибудь с какими-либо проблемами из-за обновлений состояния? Я хотел бы услышать ваши отзывы.
Спасибо за чтение!
Вы можете посетить мой канал на YouTube JavaScript Centric и подписаться на интересные видео.
Создавайте компонуемые веб-приложения
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы вместе размещать компоненты и совместно работать над ними, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте компонуемые внешние интерфейсы с помощью Design System или Микроинтерфейсы или изучите компонуемые внутренние интерфейсы с серверными компонентами. .
