FlatList将api调用输出到控制台，但不呈现

Question

我已经花费了数小时试图寻找解决方案。我能够成功将API响应呈现给控制台，并且没有其他错误。我的FlatList不能渲染。

请查看我的代码。由于缺少代码，这应该是一个简单的解决方案。我还添加了API响应以提供帮助：

import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableWithoutFeedback, 
StatusBar, TextInput, SafeAreaView, Keyboard, TouchableOpacity, 
KeyboardAvoidingView, Button, FlatList} from 'react-native'
import {createStackNavigator} from 'react-navigation'

 import {Image as ImageP} from 'react-native-image-progress';
import ProgressBar from 'react-native-progress';

type Props = {};

export default class TestFlatList extends Component<Props> {

constructor(props) {
  super(props);
   this.GetListItem= this.GetListItem.bind(this);
   this.getListCall= this.getListCall.bind(this);
   this.state = {   
    Token: this.props.navigation.state.params.token,    
    data: {},
    JSONResult: "",
   }
}

componentDidMount(){
    this.getListCall()
}

componentWillMount(){
}

getListCall = () => {
    const myHeaders = new Headers({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'BASIC ' + this.state.Token,
    });
var that = this;
var url = 'https://apifruit.api.com/api/v1/fruit_api.json?country="cn"&program="1000"&language="en"&device="16"';
fetch(url, {
    method: 'GET',
    headers: myHeaders,
})  
.then((response) => response.json())
.then ((res) => {

    console.log(res); 

  if(res.status == "200"){
   that.setState({ 
     JSONResult: res.data.fruit_type,
   });
  }
  console.log();
 }).catch(function (error) {
   console.log("-------- error ------- "+ error);
  alert("result:"+error)
 });
}

GetListItem (name) {
  Alert.alert(name);
}

ItemSeparatorLine = () => {
  return (
    <View
    style={{height: .5,width: "100%",backgroundColor: "#111a0b",}}
    />
  );
}

render() {
    const { navigation } = this.props;
    const { goBack } = this.props.navigation;

return(

<SafeAreaView style={styles.container} >
    <StatusBar barStyle="dark-content"/>
        <View style = {styles.container}>
            <View style = {styles.imageContainer}>
                <TouchableOpacity onPress={() => goBack()} >
                    <Image style = {styles.chevronStyle} 
                        source ={require('../images/chevron.png')}>
                    </Image>
                </TouchableOpacity>
                    <Text style={{fontFamily: 'Avenir Next', fontWeight: '700', fontSize: 20, marginTop: -30, marginLeft: 5, color: '#d0011b'}}>
                    View Fruits
                    </Text>                         
            </View >

              <FlatList
                    data={ this.state.JSONResult.data }
                    ItemSeparatorComponent = {this.ItemSeparatorLine}

                renderItem={({item}) => 


                 <Text> {item.data.fruit.name_of_fruit} </Text>
                }
              keyExtractor={(item, index) => index}
              />       
        </View>
</SafeAreaView>

    )   
}
}

API响应：

"data": {
   "cards": [
              {
         "fruit_id": "424",
         "name_on_fruit": "Mathew Mozaffari",
        },
        {
         "fruit_id": "434",
          "name_of_fruit": "Bk Chovatiya",
         }
    ]
  }