React-Native：TypeError：undefined 不是对象（评估“_this.props.item”）

Question

I'm a react-native beginner, I'm trying to render a FlatList with custom components for each item, when I get FlatList data array from backend I get the following error:

TypeError: undefined is not an object (evaluating '_this.props.item')

Here is the code for my flatlist:

return(
        <FlatList data={venueStore.venues} 
            renderItem={({ item }) => <ItemCard1 item={item}></ItemCard1>}
            style={{ flex:1 }} keyExtractor = { (item, index) => item.name+index.toString() }
        />
    );

My custom card component just in case:

<View style={{ width:'100%', height:200, flexDirection:'column', position:'relative' }}>
            <Image style={{ width:'100%', height:200, position:'absolute', top:0, left:0}}  resizeMode="cover" source={{uri: this.props.item.image }}/>
            <View style={{ width:'100%', height:200, backgroundColor:'rgba(0,0,0,0)', position:'absolute', top:0, left:0 }}></View>
            <LinearGradient colors={[ 'rgba(0,0,0,0)', 'rgba(0,0,0,0.3)']} style={{position: 'absolute', left: 0, right: 0, top: 0, height: 200}}/>
            <View style={{  flexDirection:'row' , borderRadius:2, padding:5, backgroundColor:'rgb(255,52,89)',  alignItems:'center', position:'absolute', top:10, left:10 }}>
                <Text style={{ fontSize:15, color:'white' }}>{this.props.item.id}</Text>
            </View>
            <TouchableHighlight onPress={toggleFavorited} style={{ justifyContent:'center',  alignItems:'center', position:'absolute', top:10, right:10 }}>
                {this.props.item.is_favorited 
                ?<Icon name="heart" size={25} color="white" style={{ alignSelf:'center' }}/>
                :<Icon name="heart-o" size={25} color="white" style={{ alignSelf:'center' }}/>}
            </TouchableHighlight>
            <View style={{ width:'100%', flexDirection:'row' , padding:5,  alignItems:'center', position:'absolute', bottom:0, left:0 }}>
                <Image style={{ width:50, height:50, borderRadius:50/2, marginRight:15, transform: [{ translateY: 0 }]  }}  resizeMode="cover" source={require('@assets/images/amaro-1.jpeg')}/>
                <Text style={{ fontSize:20, color:'white' }}>{ props.name }</Text>
           </View>
        </View>

Why am I getting this error, I'm fairly certain venueStore.venues is an array of data, maybe the error is how I'm passing the props to ItemCard1, or maybe how I access the props via this inside ItemCard1?

Answer 1

If your custom card component ItemCard1 is a functional component try to access props as shown below. Also, in your custom component, you mixed props eg props.name and this.props , you might want to correct that to the right one for all

const ItemCard1 = (props) => {
//rest of component
 <Text style={{ fontSize:15, color:'white' }}>{props.item.id}</Text>
}

For a class component it should be this.props like in your question.