Розробка додатку для відстеження статистики NBA: проблема оновлення даних з API та кешування в React

6 Березня 2024 в 01:45 34

При створенні додатків для відстеження спортивних статистик, однією з ключових функціональних можливостей є здатність користувача зберігати вибрані команди та отримувати оновлені дані під час перезавантаження сторінки або повторного відвідування додатку. У цій статті ми розглянемо проблему оновлення властивостей об’єктів, отриманих з API, у реактивному додатку, розробленому з використанням бібліотеки React.

fetch (/** api data */) 
    .then(res => res.json()) 
    .then(data => {
        const updatedTeams = data.response.map((team: Team) => {
            return {
                ...team,
                isFavorite: favoriteTeams.includes(team)
            };
        });
        setTeams(updatedTeams);
    })
    .catch(err => window.alert("Could not load data. Refresh and try again"));
}, [season]);

fetch (/** api data */)

.then(res => res.json())

.then(data => {

const updatedTeams = data.response.map((team: Team) => {

return {

...team,

isFavorite: favoriteTeams.includes(team)

};

});

setTeams(updatedTeams);

})

.catch(err => window.alert("Could not load data. Refresh and try again"));

}, [season]);

Проблема полягає в тому, що після оновлення даних з API стан сторінки не коректно оновлюється, і властивість isFavorite не встановлюється відповідно до умови, що в команду входить до списку улюблених. Незважаючи на те, що стан favoriteTeams містить улюблені команди, ця інформація не відображається на сторінці коректно після перезавантаження.