SQLite事务中使用await导致React状态滞后的原因及解决思路

问题根源 #

你的代码出现状态滞后的核心原因是SQLite事务API不兼容异步回调逻辑，具体两点：

1. SQLite的transaction方法会立即执行传入的回调函数，不会等待内部的await操作完成。也就是说，当你在事务回调里用await下载图片时，事务会在下载还没完成时就被标记为结束，此时如果基于数据库状态更新React状态，拿到的还是旧数据，自然会出现"滞后"。
2. forEach搭配async回调的用法本身存在问题：forEach不会等待每个异步任务完成，所有的图片下载和SQL操作会并行触发，完全打乱了事务的执行顺序，数据库的插入操作时机变得不可控，进一步加剧了状态和实际数据的不同步。

哪怕你不用await的返回值，只要保留await语句，就会让事务回调的执行被拆分到多个事件循环周期，事务的生命周期和异步操作的生命周期完全脱节，最终引发状态更新的时序问题。

修复方案 #

把异步的图片下载逻辑完全移出事务，先完成所有图片缓存，再启动事务执行同步的SQL操作：

步骤1：批量处理图片下载 #

先遍历kameoData，完成所有图片的缓存，整理好要插入的数据：

// 先处理所有图片下载，拿到本地URI
const preparedKameoData = await Promise.all(
  kameoData.map(async (kameo) => {
    const { name, avatar, profile, moves, guide } = kameo;
    const cacheAvatar = await Asset.fromURI(avatar).downloadAsync();
    const cacheProfile = await Asset.fromURI(profile).downloadAsync();
    return {
      name,
      avatarUri: cacheAvatar.localUri,
      profileUri: cacheProfile.localUri,
      movesJSON: JSON.stringify(moves),
      guideJSON: JSON.stringify(guide)
    };
  })
);

步骤2：在事务中执行同步SQL操作 #

事务内部只做同步的SQL查询和插入，避免任何异步逻辑：

db.transaction((tx) => {
  const kameoInsertQuery =
    'INSERT OR REPLACE INTO kameos (name, avatar, profile, moves, guide) VALUES (?,?,?,?,?)';

  preparedKameoData.forEach((kameo) => {
    const { name, avatarUri, profileUri, movesJSON, guideJSON } = kameo;
    // 同步执行查询和插入
    tx.executeSql('SELECT * FROM kameos WHERE name = ?', [name], (txObj, resultSet) => {
      if (resultSet.rows.length === 0) {
        tx.executeSql(
          kameoInsertQuery,
          [name, avatarUri, profileUri, movesJSON, guideJSON],
          (txObj, resultSet) => {
            console.log('Insert success kameo:', resultSet.rows._array);
          },
          (txObj, error) => {
            console.log('Insert failed kameo:', error);
          }
        );
      } else {
        console.log('Already exists', name);
      }
    });
  });
});

额外优化 #

如果需要确保插入完成后再更新React状态，可以用transaction的Promise版本（比如expo-sqlite的transactionAsync），这样可以在事务完成后再触发状态更新：

// 用transactionAsync替代transaction，支持Promise链式调用
await db.transactionAsync(async (tx) => {
  const kameoInsertQuery =
    'INSERT OR REPLACE INTO kameos (name, avatar, profile, moves, guide) VALUES (?,?,?,?,?)';
    
  for (const kameo of preparedKameoData) {
    const { name, avatarUri, profileUri, movesJSON, guideJSON } = kameo;
    const result = await tx.executeSqlAsync('SELECT * FROM kameos WHERE name = ?', [name]);
    if (result.rows.length === 0) {
      await tx.executeSqlAsync(
        kameoInsertQuery,
        [name, avatarUri, profileUri, movesJSON, guideJSON]
      );
    }
  }
});

// 事务完成后再更新状态
setYourReactState(/* 最新数据 */);

内容的提问来源于stack exchange，提问作者Alban Marku