如何在FlatList React Native中顯示JSON數據

Question

我將請求發送到我的API，它返回響應，如下所示將其轉換為JSON

現在我想在FlaList中顯示此JSON

我正在嘗試執行此操作，但未顯示任何內容

<FlatList

          data={this.state.dataSource}
          renderItem={({item}) => <Text> {item.Begin} </Text> }

Answer 1

您需要將“文本”標簽放置在“視圖”標簽以及keyExtractor中

 import React, { Component } from 'react';
 import { Platform, StyleSheet, Text, View, FlatList, Image, ScrollView, Picker } from 'react-native';

 export default class Test extends Component {
  constructor() {
  super();
   this.state = {
    data : [
    {"Begin" : "08:00:00" ,End : "08:10:00"},
    {"Begin" : "08:10:00" ,End : "08:20:00"},
    {"Begin" : "08:20:00" ,End : "08:30:00"},
    {"Begin" : "08:30:00" ,End : "08:40:00"},
    {"Begin" : "08:40:00" ,End : "08:50:00"},
    {"Begin" : "08:50:00" ,End : "08:60:00"},
  ]
  }
}

_keyExtractor = (item, index) => item.Begin.toString();

render() {

 return (
   <View style={{flex:1,justifyContent:'center'}}>
   <FlatList
   data={this.state.data}
   keyExtractor={this._keyExtractor}
   renderItem={({item}) => <Text> {item.Begin} </Text> }
   />
   </View>
  )
 }
}