React中传递SQLite查询结果至下一页为空的问题求助

看起来你遇到的核心问题是异步查询的结果没有正确传递，还有代码里传参的方式不对——你现在直接把函数this.searchCars传过去了，而不是它执行后得到的查询结果。结合React Native和SQLite的特性，我给你梳理下问题和解决办法：

首先看你代码里的关键问题 #

你按钮的 onPress 代码是这样的：

onPress={() => navigate('SearchResultView', {data: this.searchCars}) }

这里你传递的是searchCars函数本身，不是它执行后返回的查询结果。而且SQLite查询是异步操作，就算你改成this.searchCars()，也没法直接拿到同步结果，因为查询还没完成跳转就已经执行了。

修正方案：用Promise/async await处理异步查询 #

我推荐用Promise封装你的SQLite查询逻辑，这样就能在查询完成后再跳转传参：

第一步：封装异步查询函数 #

把searchCars改成返回Promise的函数，确保查询完成后再返回结果：

searchCars = () => {
  return new Promise((resolve, reject) => {
    const { brandSearch, modelSearch } = this.state;
    // 执行SQLite查询
    db.transaction(tx => {
      tx.executeSql(
        // 这里用模糊查询匹配品牌和型号，可根据你的需求调整
        'SELECT * FROM cars WHERE brand LIKE ? AND model LIKE ?',
        [`%${brandSearch}%`, `%${modelSearch}%`],
        (_, { rows }) => {
          // 把SQLite返回的rows转成数组格式
          const carList = rows._array;
          resolve(carList);
        },
        (_, error) => {
          reject(error);
          return false; // 阻止错误传播
        }
      );
    });
  });
};

第二步：在按钮点击时等待查询结果再跳转 #

用async/await来等待Promise完成，拿到结果后再传递给下一个视图：

<Button 
  title="Wyszukaj" 
  color="#841584" 
  onPress={async () => {
    try {
      // 等待查询完成，拿到最终结果
      const searchResult = await this.searchCars();
      // 现在把结果传给下一个页面
      navigate('SearchResultView', { data: searchResult });
    } catch (error) {
      console.error('查询出错啦:', error);
      // 这里可以加个Alert提示用户查询失败
      // Alert.alert('错误', '查询车辆失败，请稍后重试');
    }
  }} 
/>

额外要检查的几个点 #

• 确认你的SQLite数据库已经正确初始化，cars表存在且有数据，可以先在查询前打印brandSearch和modelSearch的值，确保参数是正确的。
• 在SearchResultView页面，要正确读取参数：如果是React Navigation 5及以上版本，函数组件里用const { data } = route.params;，类组件里用this.props.route.params.data来获取传递的数据。
• 如果不习惯用async/await，也可以用回调函数的方式处理异步查询，核心逻辑不变——必须等查询完成后再执行跳转传参。

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