[英]React Native FlatList Rendering
我是 RN 的新手,我在使用平面列表渲染 API 中的項目時遇到了一些問題。 我使用服務器的分頁來為每個請求返回 10 個項目,並使用 loadMore function 來更改頁面和檢索新數據。 問題是當我滾動幾次(4-5 頁)時出現此錯誤,我很困惑如何解決它。 如果有人可以為我提供修復,我將非常感激。 提前致謝!
這是我的 API 獲取 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));
}
};
};
這是我的 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)}
/>
這是渲染項目 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>
);
}
並加載更多 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);
});
}
}
您的某些商品似乎缺少圖片。 嘗試添加檢查以確保每個項目都存在圖像。 這樣的事情應該有效:
_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>
);
}
為了進一步解釋您看到的錯誤。 item.images
應該是一個對象數組,但如果沒有圖像,那么item.images[0]
將是未定義的。 然后,您嘗試訪問 object 屬性woocommerce_thumbnail
但item.images[0]
未定義,因此您會收到“undefined is not an object”錯誤。
再見,您在_renderItem
中的item
似乎undefined
(錯誤說“未定義不是對象”)。 因此,您可以通過執行以下操作輕松解決:
_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>}
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.