I have a couple await lines that get executed inside an sqlite transaction method. The code executes fine but it causes my React states to be a step behind.
The await lines have the purpose of using the Expo Asset package to store the online image url to the local device storage.
The states only become up to date when remove these await lines entirely. Even just leaving them in without using their values, causes the states to be behind. Why ares these lines causing my front end states to be behind?
db.transaction(async (tx) => {
//KAMEO insert logic
const kameoInsertQuery =
'INSERT OR REPLACE INTO kameos (name, avatar, profile, moves, guide) VALUES (?,?,?,?,?)';
//kameoData is an array of objects containing the values below.
kameoData.forEach(async (kameo) => {
const { name, avatar, profile, moves, guide } = kameo;
const movesJSON = JSON.stringify(moves);
const guideJSON = JSON.stringify(guide);
//These two await lines are causing the states in the front end to be a step behind even when not inserting their values into the db.
const cacheAvatar = await Asset.fromURI(avatar).downloadAsync();
const cacheProfile = await Asset.fromURI(profile).downloadAsync();
//Check to see if already exists before insertion.
tx.executeSql('SELECT * FROM kameos WHERE name = ?', [name], (txObj, resultSet) => {
if (resultSet.rows.length > 0) {
console.log('Already exists', name);
} else {
//Insert values into db. Use the localuri for the images.
tx.executeSql(
kameoInsertQuery,
[name, cacheAvatar.localUri, cacheProfile.localUri, movesJSON, guideJSON],
(txObj, resultSet) => {
console.log('Insert success kameo:', resultSet.rows._array);
},
(txObj, error) => {
console.log('Insert failed kameo:', error);
}
);
}
});
});
}
A fix would most likely involve not using the await lines inside the transaction method.