React. Проблема со state
Недавно изучаю реакт, столкнулся со следующей проблемой: Проект - сайт с фильмами с возможностью поиска по названию и по тегам. У меня есть 4 компонента: 1. App который является родителем; 2. SearcBlock - компонент включающий в себя поле поиска и компонент Tags; 3. Компонент Tags, который содержит список тегов с категориями фильмов, которые можно использовать при поиске посредством клика; 4. Компонент FilmsList, который отображает список фильмов, целиком, или соответствующих поисковому запросу;
Проблема в том, что при первом клике на тег, state в SearchBlock обновляется с опозданием и перендеринг происходит только со второй попытки. Более того, столкнулся с ещё одной странностью - если выбрать несколько активных тегов, а потом снять с них метку, то state снова не обновится при выборе одного тега и поиск начнет работать только со второй попытки.
Код можно посмотреть здесь: https://codesandbox.io/s/films-kwmmd
Кто нибудь может объяснить мне, как решить эту проблему? Заранее спасибо
Ответы (1 шт):
Во-первых: переходите на хуки, с классами работают только мазохисты.
С классами особо не работал, но подозреваю что проблема тут (могу ошибаться):
updateActiveTags = activeTags => {
this.setState({
activeTags
});
this.filterFilms();
};
Вы запускаете фильтр до того, как обновляется state activeTags (обе функции проходят в одном рендере).
Решение для проверки простое:
updateActiveTags = activeTags => {
this.setState({
activeTags
});
this.filterFilms(activeTags);
};