如何在 react-native 中从 Array 中的 sqlite 弹出结果？

Question

我是 React Native 的新手，我正在努力学习它。我想从 SQLite 获取结果并将它们弹出到数组中，然后我可以在平面列表中使用它来显示..这是我的代码：

    //imports

import React,{Component} from 'react';
import {View,Text,FlatList} from 'react-native';



//create component

var SQLite = require('react-native-sqlite-storage')
var db=SQLite.openDatabase({name: 'test.db', createFromLocation: '~sqliteexample.db'})

class DbTask extends Component {


    constructor(props){
        super(props)

        this.state={
            data: []

        };

        db.transaction((tx)=>{

            tx.executeSql('Select * from `pet`',[],(tx,results)=>{

               var len=results.rows.length;
                for(let i=0; i<len; i++){
                 var row=results.rows.item(i);
                 this.state.data.push(row.owner);

                 }


            });

        });

    };


    render(){

        return(
        <View>

           <FlatList data={this.state.data} 
           renderItems={
            ({item})=> <Text>{item.owner}</Text>

           }
           > </FlatList>
        </View>
        );

     }

}


export default DbTask;

我尝试在 For 循环中添加一些警报，它向我显示了正确的所有者姓名。但我不明白，要么我无法将它们推送到 "data" 数组中，要么我的平面列表不起作用。

如有任何帮助，我们将不胜感激。提前致谢。问候。

Answer 1

P.S ：除了问题出在我的平面列表中之外，我对数据库进行了一些修改。刚刚像下面这样修改了平面列表，它就像一个魅力：

<FlatList 
    data={this.state.data} 
    keyExtractor={((item, index) => "itemNo-" + index)}
    renderItem={({item}) => (
        <View style={{flex:1 , flexDirection:'row',justifyContent:'flex-start',marginBottom:10}}>
            <View style={{paddingLeft:20,width:60}}>
            <Text>{item.Number}</Text>
            </View>
            <View style={{paddingLeft:40,width:120}}>
            <Text>{item.Owner}</Text>
            </View>
            <View style={{paddingLeft:50,width:150}}>
            <Text>{item.PetName}</Text>
            </View>
        </View>
    )
  }
/>

如何在 react-native 中从 Array 中的 sqlite 弹出结果？

How to pop results from sqlite in Array in react-native?

arrays

sqlite

react-native

react-native-flatlist