ошибка типа: undefined не является объектом (оценивается как this.props.sprites.front_default)

Question

React Native говорит об ошибке типа: undefined не является объектом (оценивает this.props.sprites.front_default). Вызов API, работающий как предупреждение, показывает подробности в API и при обращении к «id» и «name». «это работает, но при попытке использовать« спрайты »всегда получаю ошибку. Я пытался использовать только вызов API и использованные спрайты, и это работает, но при использовании в этом проекте не работает вообще ... не могу решить эту небольшую проблему в течение нескольких дней... Это пример кода.

 <ScrollView style = {styles.container}>
        <View style = {styles.imageView}>
            <View style = {styles.dataView}>

                <Text>ID:{this.props.data.id}name:{this.props.data.name} </Text>
                <Image source = {{uri: this.props.data.sprites.front_default}}/>
            </View>
        </View>

    </ScrollView>

Это страница searchbody, из которой извлекаются данные API.

## **searchbody.js** ##
 ```import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
import axios from 'axios';
import SearchBodyTemplate from './searchbodytemplate';

export default class SearchBody extends Component {
static navigationOptions = {
    header: null
}
state = {
        isLoading: true,
        data: {},
        pokeSearch: `https://pokeapi.co/api/v2/pokemon/${this.props.navigation.state.params.value.toLowerCase()}`,
        
        
    }


componentWillMount(){
    var self = this;
    axios.get(`${this.state.pokeSearch}`)
    .then(function(response){
        console.warn(response.data)
        self.setState({data:response.data});
    })
    .catch(function(error){
        console.log(error)
    })
    
}

renderBody = () => {
  return <SearchBodyTemplate data={this.state.data}/>
}

  render() {
    return (
    
      <ScrollView style = {styles.container}>
           <View style = {styles.imageView}>
                {this.renderBody()}
            </View>
            <View style = {styles.dataView}>
             </View>     
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 24,
    backgroundColor: 'green',
    flex: 1
  },
  imageView: {
      height: 250,
      width: '100%',
      backgroundColor: 'red'
  },
  dataView: {
      
      backgroundColor: 'blue',
      height:600,
      width:'100%'          
  }
})```

Это шаблон searchbody, являющийся пользовательским компонентом для передачи данных из 'searchbody' в 'searchbodytemplate'

## **searchbodytemplate.js** ##

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

export default class SearchBodyTemplate extends Component {

    render() {
    return (
        <ScrollView style = {styles.container}>
            <View style = {styles.imageView}>
                <View style = {styles.dataView}>
                    
                    <Text>ID:{this.props.data.id}name:{this.props.data.name} </Text>
                    <Image source = {{uri: this.props.data.sprites.front_default}}/>
                    <Text>jhfukfgkthf</Text>
                </View>
            </View>

        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'green',
        height:400,
        width: 400
    },
    imageView: {
        flex: 1,
        backgroundColor: 'red'
    },
    dataView: {
        flex: 3,
        backgroundColor: 'green'
    }
})```