React Native中SQLite事务晚于日志执行致数组为空的解决方案咨询

嘿，这绝对是异步操作的经典坑！我一眼就看出来问题所在了——db.transaction和里面的executeSql都是异步执行的，不会阻塞后续代码。你在事务外面写的console.log("FAV DATA: ",favoritesData)会先跑，这时候数据库查询还没完成，favoritesData当然是空数组啦。

下面给你两种靠谱的解决方案，按需选择：

方案一：把数据处理逻辑移到异步回调里 #

最简单的修复方式，就是把需要用到favoritesData的代码（比如打印、更新组件状态）直接放到executeSql的成功回调中，确保数据已经加载完成再执行：

getFavorits = () => { 
  let favoritesData = []; // 用let声明，避免全局变量污染
  db.transaction(tx => { 
    tx.executeSql( 
      'SELECT * FROM table_favorites', 
      [], 
      (tx, results) => { 
        const len = results.rows.length; 
        console.log('Total Fav = ', len); 
        if (len > 0) { 
          for (let i = 0; i < len; ++i) { 
            favoritesData.push(results.rows.item(i)); 
          } 
        }
        // 在这里处理数据！此时数据已经填充完毕
        console.log("FAV DATA: ", favoritesData);
        // 如果是类组件，更新状态也放这里：
        // this.setState({ favorites: favoritesData });
      },
      // 别忘了加上错误回调，方便排查问题
      (tx, error) => {
        console.error("查询收藏数据失败:", error);
      }
    ); 
  }); 
}

方案二：用Promise封装，支持async/await（更优雅的异步管理） #

如果你的业务逻辑里有多个异步操作，用Promise+async/await能让代码结构更清晰，避免回调地狱：

getFavorits = async () => { 
  return new Promise((resolve, reject) => {
    let favoritesData = [];
    db.transaction(tx => {
      tx.executeSql(
        'SELECT * FROM table_favorites',
        [],
        (tx, results) => {
          const len = results.rows.length;
          console.log('Total Fav = ', len);
          if (len > 0) {
            for (let i = 0; i < len; ++i) {
              favoritesData.push(results.rows.item(i));
            }
          }
          resolve(favoritesData); // 查询成功，返回数据
        },
        (tx, error) => {
          reject(error); // 查询失败，返回错误信息
        }
      );
    });
  });
}

// 调用方式1：用then/catch
// this.getFavorits()
//   .then(favData => {
//     console.log("FAV DATA: ", favData);
//     this.setState({ favorites: favData });
//   })
//   .catch(err => console.error("出错了:", err));

// 调用方式2：在async函数里用await
// const loadFavorites = async () => {
//   try {
//     const favData = await this.getFavorits();
//     console.log("FAV DATA: ", favData);
//     this.setState({ favorites: favData });
//   } catch (err) {
//     console.error("加载收藏数据失败:", err);
//   }
// };
// loadFavorites();

额外提醒 #

• 一定要用let/const声明变量，别直接用全局变量favoritesData，容易引发意想不到的bug；
• 如果是函数组件，用useState和useEffect配合的时候，同样要确保在异步回调里更新状态；
• 永远不要忽略错误处理，加上错误回调能帮你快速定位数据库操作的问题。

内容的提问来源于stack exchange，提问作者Jagdish Suryawanshi