React原生FlatList呈现
React原生FlatList呈现
提问于 2020-08-04 03:36:30
我是RN的新手，在用扁平列表从API中渲染项目时遇到了一些问题。我使用来自服务器的分页来返回每个请求的10个项目，并使用loadMore函数来更改页面和检索新数据。问题是当我滚动几次(4-5页)时，我得到了这个错误，我很困惑如何修复它！如果有人能为我提供修复，我将非常感激。提前感谢！
下面是我的API fetch函数=>
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)}
/>下面是呈现项函数=>
_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>
);
}和loadMore函数=>
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);
});
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-04 03:45:48
看起来你的一些项目缺少图片。尝试添加检查以确保每个项目都存在图像。像这样的东西应该是有效的：
_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]将是未定义的。然后，您尝试访问对象属性woocommerce_thumbnail，但item.images[0]未定义，因此您会得到“未定义的不是对象”错误。
Stack Overflow用户
发布于 2020-08-04 03:49:39
您在_renderItem中的item似乎是undefined (错误提示"undefined is not a object")。因此，您可以通过执行以下操作轻松解决问题：
_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>}
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63235883
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号