Как отобразить список данных, используя FlatList в ReactNative

Всем привет

Таблица SQLite:
Имя таблицы: Пользователи
Столбец: user_id,имя

Мы попытались отобразить user_id и имя сведений о пользователе в FlatList, но у меня возникла проблема с помещением объекта пользователей в массив и списком объектов массива для отображения в FlatList.

У меня есть ссылка ниже на stackoverflow, но я все еще сталкиваюсь с проблемой:

React Native Sqlite получает все данные в Listview

import React, { Component } from 'react';
import { Text,
         View,
         Button,FlatList,ListItem,
         TextInput,Alert,
         StyleSheet } from 'react-native';

var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'sqliteexample.db', createFromLocation: '~sqliteexample.db'})
const count = 0;
type Props = {};
export default class HelloWorldApp extends Component<> {

  constructor(props){
      super(props)

      this.state = {
        user_id:'',
        name:'',
        record:[],
        data:{user_id:'',name:''},
        dataSource: [{user_id:'1',name:'a1'},{user_id:'1',name:'a1'},{user_id:'1',name:'a1'}],
      };

      db.transaction(function (txn) {
      txn.executeSql('SELECT * FROM Users', [], function (tx, res) {

         var len = res.rows.length;
         console.log('mylength: ' + len);

         for (let i = 0; i < len; i++) {
           console.log('mylength: ' + res.rows.item(i).name);
           this.setState({dataSource: this.state.dataSource.put(res.rows.item(i).name)});
        }
       });
      });
  }

    onPressInsert (){
      var uid = this.state.user_id;
      var uname = this.state.name;
      console.log('lengths I ' + uid + ' abc ' + uname);
      db.transaction(function (txn) {
       txn.executeSql('INSERT INTO Users (name,user_id) VALUES (:name,:user_id)', [uname,uid]);
       txn.executeSql('SELECT * FROM Users', [], function (tx, res) {
         for (let i = 0; i < res.rows.length; ++i) {
              let row = res.rows.item(i);
              console.log('Select Id a : ' + dataSource.length);
          }
          Alert.alert('Insert Id: ' + uid + ' Name: ' + uname + ' successfully');
       });
      });
    }

    onPressUpdate () {
      var uid = this.state.user_id;
      var uname = this.state.name;
      console.log('lengths U ' + uid + ' abc ' + uname);
      db.transaction(function (txn) {
        txn.executeSql('UPDATE `Users` SET  name=? WHERE user_id=?', [uname,'3']);
        txn.executeSql('SELECT * FROM Users', [], function (tx, res) {
          Alert.alert('Update Id: ' + uid + ' Name: ' + uname + ' successfully');
       });
      });
    }

    onPressDelete () {
      var uid = this.state.user_id;
      var uname = this.state.name;
      console.log('lengths D ' + uid + ' abc ');
      db.transaction(function (txn) {
       txn.executeSql('DELETE FROM `Users` WHERE492 `user_id`=?', [uid]);
       txn.executeSql('SELECT * FROM Users', [], function (tx, res) {
         Alert.alert('Delete Id: ' + uid + ' Name: ' + uname + ' successfully');
       });
      });
    }

    onPressSelect () {
      db.transaction(function (txn) {
       txn.executeSql('SELECT * FROM Users', [], function (tx, res) {
         for (let i = 0; i < res.rows.length; ++i) {
              Alert.alert('Select Id: ' + uid + ' Name: ' + uname + ' successfully');
          }
       });
      });
    }

  render() {

    return (
      <View>
      <TextInput
         style={styles.welcome}
         placeholder="Enter Id"
         editable = {true}
         value = {this.state.user_id}
         onChangeText={(text) => this.setState({user_id:text})}
         maxLength = {30}
       />
       <TextInput
               style={styles.welcome}
               value = {this.state.name}
               placeholder="Enter Full Name"
               editable = {true}
               onChangeText={(text) => this.setState({name:text})}
               maxLength = {30}
             />
         <View>
         <Button
         onPress={this.onPressInsert.bind(this)}
         title="Insert"
         color="#841584"/>
         <Button
         onPress={this.onPressUpdate.bind(this)}
         title="Update"
         color="#841584"/>
         <Button
         onPress={this.onPressDelete.bind(this)}
         title="Delete"
         color="#841584"/>
         </View>
         <FlatList
             data={this.state.dataSource}
             renderItem={({item}) => <Text> Id is :: {item.user_id} Name is :: {item.name}</Text>}
             keyExtractor={(item, index) => index+''}
            />

            <FlatList data={this.state.record}
                         keyExtractor={(x,i) => 1}
                         renderItem={ ({item}) =>
                             <ListItem><Text>{item.name}</Text></ListItem>
                         }
               />
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
 itemBlock: {
   flexDirection: 'row',
   paddingBottom: 5,
 },
 itemImage: {
   width: 50,
   height: 50,
   borderRadius: 25,
 },
 itemMeta: {
   marginLeft: 10,
   justifyContent: 'center',
 },
 itemName: {
   fontSize: 20,
 },
 itemLastMessage: {
   fontSize: 14,
   color: "#111",
 }
});