[英]ReactNative : Function called twice automatically inside FlatList
我一直在寻找解决这个愚蠢问题的办法。 我的代码中缺少一些我现在无法理解的东西。 期待您对以下代码的回答和信息:
构造函数:
constructor(props) {
super(props)
this.TotalQuery = this.TotalQuery.bind(this);
this.state = {
isLoading: true,
Query: [],
}
this.UserID();
}
功能()
TotalQuery(product_id){
fetch(`http://:3000/api/v1/users/queries/${product_id}`, {
method: 'GET',
}).then((response) => response.json()).then((resp => {
this.setState({
Query: resp
})
})) .catch((error)=>{
console.log("Api call error1");
})
}
在 Flatlist 中调用它,如下所示:
<FlatList
data={this.state.UserProducts}
keyExtractor={(item, index) => index.toString()}
renderItem= { ({item}) => (
<View style={styles.order}>
<View style={styles.orderHeader}>
<View style={styles.ohInfo}>
<Text style={styles.ohLabel}>Ref#</Text>
<Text style={styles.ohValue}>#2019-{item.product_id}</Text>
</View>
<View style={[styles.ohInfo, { backgroundColor: '#E7E7E7' }]}>
<Text style={styles.ohLabel}>Amount</Text>
<Text style={styles.ohValue}>€{item.price}</Text>
</View>
<View style={styles.ohInfo}>
<Text style={styles.ohLabel}>Messages</Text>
{this.TotalQuery(item.product_id)}
{this.state.Query.map((i, index) => (
<Text style={styles.ohValue}>{i.total}</Text>))}
</View>
</View>
<View style={styles.profileImgContainer}>
<View>
<ImageBackground style={styles.profileImgContainer}>
<Image source={{ uri: item.url }} style={[styles.profileImg]} />
</ImageBackground>
</View>
</View>
<View style={styles.orderBottom}>
<View style={styles.orderBottomLf}>
<Image resizeMode={'contain'} style={{ width: 14, height: 14 }}
source={require('../../assets/images/icon-pending-black.png')} />
<Text
style={[styles.orderStatusText]}>
{(item.status === 1) ? <Text style={styles.Approved}>Approved</Text> : null}
{(item.status === 2) ? <Text style={styles.Sold}>Sold</Text> : null}
{(item.status === 3) ? <Text style={styles.UnderReview}>Under Review</Text> : null}
{(item.status === 4) ? <Text style={styles.Inactive}>Inactive</Text> : null}
{(item.status === 5) ? <Text style={styles.Deleted}>Deleted</Text> : null}
</Text>
</View>
<View style={styles.orderBottomRg}>
<TouchableOpacity style={styles.profileImgContainer1} onPress={() => this.Sold(item.product_id)}>
{(item.status === 1) ? <Image style={[styles.profileImg1]} source={require('../../assets/images/checked.png')}/> : null}
</TouchableOpacity>
</View>
<View style={styles.orderBottomRg}>
<TouchableOpacity style={styles.profileImgContainer2} onPress={() => {this.Delete(item.product_id)}}>
{(item.status === 1 || item.status === 3 || item.status === 4) ? <Image style={[styles.profileImg2]} source={require('../../assets/images/delete.png')}/> : null }
</TouchableOpacity>
</View>
</View>
</View>
)}
/>
上面是 flatlist 渲染,一切都是从它渲染出来的。 请检查。
您的代码存在多个问题。
问题是您在 Flatlist renderItem
方法中调用了一个函数。
Flatlist 的工作方式是给它一个数据集,然后它会为该数据集中的每个条目调用renderItem
。
然后,每当您的组件重新呈现或子项重新呈现时,Flatlist 都会再次执行此操作。
另外,看起来您想为数据集中的每个项目调用this.TotalQuery(item.product_id)
但您将返回值保存为单个状态值,因此每次调用都会覆盖前一个。
我建议将您的renderItem
代码移动到它自己的Component
,然后每个Component
实例都可以拥有自己的状态对象,您可以在其中保存函数调用的返回值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.