I'm new to RN and i have some issue with rendering items from API with flatlist. I use pagination from server to return 10 items per request and loadMore function for changing page and retrive new data. The problem is when i scroll few times(4-5 pages) i get this error and i'm confused how to fix it. I will be very thankful if someone can provide me fix. Thanks in advance!
here is my API fetch function =>
export const fetchProducts = (page) => {
return async (dispatch) => {
dispatch(fetchingFromServer());
try {
await fetch(SITE_URL + products + `&page=${page}` + '&per_page=12' + AUTH_PARAMS)
.then((res) => res.json())
.then((json) => dispatch(fetchingProductsSuccess(json)));
} catch (err) {
dispatch(fetchinProductsFailed(err));
}
};
};
here is my flatList =>
<FlatList
data={data || []}
numColumns={2}
maxToRenderPerBatch={5}
keyExtractor={(item, index) => {
return `${item.name}-${index}`;
}}
renderItem={({ item }) => {
return this._renderItem(item);
}}
onEndReached={() => this.loadMoreData()}
onEndReachedThreshold={2}
ListFooterComponent={this.renderFooter.bind(this)}
/>
here is render item function =>
_renderItem(item) {
return (
<View style={styles.containerP}>
<Image style={styles.image} source={{ uri: item.images[0].woocommerce_thumbnail }} />
<Text numberOfLines={1} style={styles.name}>
{item.name}
</Text>
{item.regular_price !== '' && item.price + '' !== item.regular_price + '' ? (
<View style={styles.prices}>
<Text style={styles.price_discounted}>{item.regular_price}лв</Text>
<Text style={styles.price}>{item.price}лв</Text>
</View>
) : (
<Text style={styles.price}>{item.price}лв</Text>
)}
</View>
);
}
and loadMore function =>
loadMoreData() {
const { fetching_from_server, isListEnd } = this.state;
if (!fetching_from_server && !isListEnd) {
this.setState({ fetching_from_server: true }, () => {
this.props.productActions.fetchProducts(this.page);
});
}
}
It looks like some of your items are missing images. Try adding a check to make sure an image exists for each item. Something like this should work:
_renderItem(item) {
return (
<View style={styles.containerP}>
{item.images && item.images.length ? (
<Image
style={styles.image}
source={{uri: item.images[0].woocommerce_thumbnail}}
/>
) : null}
<Text numberOfLines={1} style={styles.name}>
{item.name}
</Text>
{item.regular_price !== '' &&
item.price + '' !== item.regular_price + '' ? (
<View style={styles.prices}>
<Text style={styles.price_discounted}>{item.regular_price}лв</Text>
<Text style={styles.price}>{item.price}лв</Text>
</View>
) : (
<Text style={styles.price}>{item.price}лв</Text>
)}
</View>
);
}
To explain the error you are seeing a little further. item.images
is expected to be an array of objects but if there are no images then item.images[0]
will be undefined. You then try access the object property woocommerce_thumbnail
but item.images[0]
is undefined so you get the "undefined is not an object" error.
Ciao, seems that your item
in _renderItem
is undefined
(error says "undefined is not an object"). So you can easly solved by doing something like:
_renderItem(item) {
return (
{item &&
<View style={styles.containerP}>
<Image style={styles.image} source={{ uri: item.images[0].woocommerce_thumbnail }} />
<Text numberOfLines={1} style={styles.name}>
{item.name}
</Text>
{item.regular_price !== '' && item.price + '' !== item.regular_price + '' ? (
<View style={styles.prices}>
<Text style={styles.price_discounted}>{item.regular_price}лв</Text>
<Text style={styles.price}>{item.price}лв</Text>
</View>
) : (
<Text style={styles.price}>{item.price}лв</Text>
)}
</View>}
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.