React Native SQLite：如何将数据库数据存入状态并渲染到FlatList？

没问题！我来帮你搞定这个问题～

一、先把数据库查询结果存入组件状态 #

你原来的代码在处理查询结果时有点小问题，咱们修正并完善一下：

1. 先初始化组件状态
   在组件的构造函数里，先给_records初始化一个空数组，用来存储查询到的数据：

constructor(props) {
  super(props);
  this.state = {
    _inputValue: '',
    _records: [] // 初始化空数组，准备存查询结果
  };
}

2. 修正数据库查询逻辑
   把查询到的数据库行数据转换成普通数组，再更新组件状态，同时注意避免SQL注入风险（别直接拼接字符串！）：

db.transaction(tx => {
  // 用参数化查询替代字符串拼接，更安全
  const sql = "SELECT * FROM tblVietAnh WHERE word LIKE ? LIMIT 5";
  // 把输入值转小写后拼接%，作为参数传入
  const queryParams = [`${this.state._inputValue.toLowerCase()}%`];
  
  tx.executeSql(sql, queryParams, (tx, results) => {
    const recordList = [];
    const rowCount = results.rows.length;
    // 循环取出每一行数据，存入数组
    for (let i = 0; i < rowCount; i++) {
      recordList.push(results.rows.item(i));
    }
    // 更新组件状态，把数组存进去
    this.setState({ _records: recordList });
  }, (tx, error) => {
    // 别忘了处理查询错误的情况
    console.error('数据库查询出错:', error);
  });
});

二、用FlatList渲染数据 #

在组件的render方法里，添加FlatList组件来展示状态里的_records：

render() {
  return (
    <FlatList
      // 绑定数据源为状态里的_records
      data={this.state._records}
      // 为每个列表项指定唯一key（用数据里的key字段）
      keyExtractor={(item) => item.key}
      // 渲染单个列表项的逻辑
      renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.Word}</Text>
          <Text style={{ fontSize: 16, color: '#666', marginTop: 4 }}>{item.Meaning}</Text>
        </View>
      )}
      // 数据为空时显示的提示
      ListEmptyComponent={() => (
        <View style={{ padding: 20, alignItems: 'center' }}>
          <Text>没有找到匹配的单词</Text>
        </View>
      )}
    />
  );
}

几个关键注意点 #

• keyExtractor必须指定，它能帮助React优化列表渲染，避免警告和重复渲染问题
• renderItem的参数是一个对象，里面的item就是数组里的每一条数据
• 一定要处理查询错误的情况，不然出问题了都不知道原因

这样修改后，当你从数据库查询到数据并更新状态后，FlatList会自动重新渲染，展示所有匹配的单词和释义啦～

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