Question

我已经完成了将数据插入Realm数据库的操作。

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

但是，它在列表中显示undefined。.并且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。 Flat列表接受一个数组作为数据，因此首先需要将myJSON从{{}}转换为[{}] Objects数组。

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

您错过的一个关键事情是，列表data属性应该是一个数组。所以我像这样更新了您的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)获取数据对象的数组。使用如下所示的平面列表

<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中的数据显示问题

2 个答案: