FlatList 不显示数据

Question

我的问题可能看起来重复，但事实并非如此。我正在尝试从本地 sqlite 获取 table 并通过平面列表显示它。但它显示未定义！

这是我的代码：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ToastAndroid,
  ListView,
  ActivityIndicator,
  FlatList,
  } from 'react-native';


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

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      petname: "",
      owner: "",
      record: []
    };


  db.transaction((tx) => {
    tx.executeSql('SELECT * FROM pet', [], (tx, results) => {
      var len = results.rows.length;
      for (let i = 0; i < len; i++) {
        let row = results.rows.item(i);
        record = this.state.record.slice()
        record.push(row.petname)
        this.setState({ record: record })
}
    });
});

  }

  render() {
    return (
      <View style={styles.container}>
        <Text>SQLite Example</Text>     
        <FlatList 
              data={this.state.record} 
              keyExtractor={((item, index) => "itemNo-" + index)}                            renderItem={({item}) => (
              <View>
                  <View>
                    <Text>{'this owner:  ' + item.owner}</Text>
                  </View>
                  <View>
                    <Text>{'this petmname:    '+ item.petname}</Text>
                </View>
              </View> 
        )
    }
/>
          </View>
    );
  }
}

请告诉我我做错了什么？谢谢

Answer 1

我认为问题出在下一行：

record.push(row.petname)

您正在推送一个字符串 row.petname，稍后您尝试检索它的属性 - 这是不正确的，因为它没有这些属性。

尝试用下一行替换上述行：

record.push(row)

此外，这里.slice()的目的是什么： record = this.state.record.slice() ?

FlatList 不显示数据

FlatList does not show data

react-native

react-native-flatlist