来自 Realm 数据库的 FlatList 中的数据显示问题

Question

我已将数据插入 Realm 数据库。

现在，将数据插入数据库后，我正在从数据库中检索数据并尝试将其显示在 react-native 的 FlatList 中。

但是，它显示 undefined in list.. 并且 FlatList 中有很多行的值为 'undefined'。

下面是我的组件的 render() 方法：

 render() {
    var A = realm.objects('Student_Info');
    var myJSON = JSON.stringify(A);

    return (

      <View style={styles.MainContainer}>

        <TextInput 
              placeholder="Student Name"
              style = { styles.TextInputStyle } 
              underlineColorAndroid = "transparent" 
              onChangeText = { ( text ) => { this.setState({ Student_Name: text })} } 
            />

        <TextInput  
              placeholder="Class"
              style = { styles.TextInputStyle } 
              underlineColorAndroid = "transparent" 
              onChangeText = { ( text ) => { this.setState({ Student_Class: text })} } 
            />

        <TextInput 
              placeholder="Subject"
              style = { styles.TextInputStyle } 
              underlineColorAndroid = "transparent" 
              onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} } 
            />
        <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >
          <Text style={styles.TextStyle}> Make Student Entry </Text>
        </TouchableOpacity>

        <Text style={{marginTop: 10}}>{myJSON}</Text>

        <FlatList      
          //data={this.state.dataSource}
          data={myJSON}
          ItemSeparatorComponent={this._flatListItemSeparator}
          renderItem={({ item }) =>
            <View style={{ flex: 1, flexDirection: 'row' }} >
              <Text style={styles.textView}>{"Student Name : "+item.student_id}</Text>
            </View>
          }
          keyExtractor={(item, index) => index.toString()}
        />
      </View>  
     );

可能是什么问题？

谢谢。

编辑

我从数据库中得到的 json 数据如下：

{"0":{"student_id":1,"student_name":"Ashish","student_class":"React","student_subject":"React native"},"1":{"student_id":2,"student_name":"Ashish1","student_class":"React1","student_subject":"React native1"},"2":{"student_id":3,"student_name":"","student_class":"","student_subject":""},"3":{"student_id":4,"student_name":"","student_class":"","student_subject":""}}

使用以下方法重新设计架构：

 realm = new Realm({
      schema: [{
        name: 'Student_Info',
        properties:
        {
          student_id: { type: 'int', default: 0 },
          student_name: 'string',
          student_class: 'string',
          student_subject: 'string'
        }
      }]
    });

Answer 1

如@AravindS 在他的演示中所示。平面列表接受数组作为数据，因此首先您需要将 myJSON 从 {{}} 转换为 [{}] 对象数组。

render() {
   var A = realm.objects('Student_Info');
   // Remove This line    var myJSON = JSON.stringify(A);

   // Add this line 
   var studentsDetail = Object.values(A);
       ....

   // Assign studentsDetail to data prop of flat list

   <FlatList      
      data={studentsDetail}
         ...
 // Rest of code

Answer 2

你错过的一个关键是，flatlist data prop 应该是一个数组。所以我更新了你的JSON喜欢

let myJSON = [
      {
        "0": {
          student_id: 1,
          student_name: "Ashish",
          student_class: "React",
          student_subject: "React native"
        },
        "1": {
          student_id: 2,
          student_name: "Ashish1",
          student_class: "React1",
          student_subject: "React native1"
        },
        "2": {
          student_id: 3,
          student_name: "",
          student_class: "",
          student_subject: ""
        },
        "3": {
          student_id: 4,
          student_name: "",
          student_class: "",
          student_subject: ""
        }
      }
    ];

并使用 Object.values(myJSON) 获取 data.Use 平面列表的对象数组，如下所示

<View>
        <FlatList
          //data={this.state.dataSource}
          data={myJSON}
          renderItem={({ item }) => (
            <View style={{ flex: 1, flexDirection: "column" }}>
              <Text style={styles.textView}>{item[0].student_id}</Text>
              <Text style={styles.textView}>{item[1].student_id}</Text>
              <Text style={styles.textView}>{item[2].student_id}</Text>
              <Text style={styles.textView}>{item[3].student_id}</Text>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>

来自 Realm 数据库的 FlatList 中的数据显示问题

Data display issue in FlatList from Realm database

realm

react-native

react-native-android

react-native-ios

react-native-flatlist