javascript - RefreshControll 数据重复每次在 React Native 中拉动以刷新 ScrollView
问题描述
描述
我在 React Native 中实现了一个拉取请求RequestController
,每次我拉动刷新相同的数据时,都会一遍又一遍地添加到平面列表中。我实现的拉取请求不在平面列表中,而是在ScrollView
包裹FlatList
.
行动
import React, { Component } from 'react';
import { View, StyleSheet, Text, Button, Modal, Dimensions, ScrollView, TextInput, TouchableOpacity, StatusBar, Image, Platform, TouchableNativeFeedback,FlatList, ImageBackground, RefreshControl } from 'react-native';
import axios from 'axios';
class HomeScreen extends Component{
state = {
refreshing: false,
}
componentDidMount(){
this.searchApi();
}
searchApi = async() => {
const response = await axios.get('http://73udkYid.ngrok.io/api/v1/products',{
headers: {
"x-auth-token":"eyJfaWQiOiI1ZdfjzZmM4YjIwYjBjZDQyMmJkNzUiLCJpYXQiOjE2MD"
}
}
);
this.setState({results: [...this.state.results, response.data]});
}
_onRefresh = () => {
this.setState({refreshing: true});
this.searchApi().then(() => {
this.setState({refreshing: false});
});
}
render(){
let finalGames = [];
this.state.results.forEach(obj => {
Object.keys(obj).forEach(key => {
finalGames.push(obj[key]);
});
});
return (
<ScrollView style={{flex: 1,backgroundColor: 'white',}}
refreshControl = {
<RefreshControl
refreshing = { this.state.refreshing }
onRefresh={this._onRefresh}
/>
}
>
<FlatList
data = { finalGames }
keyExtractor = {(item, index) => index.toString()}
renderItem = { ({item: itemData}) => {
if(itemData.empty == true){
return <View style = {[styles.item,styles.itemInvisible]}/>
}
return (
<View style = {{ flex: 1, margin: 4}}>
<View style = {styles.item}>
<TouchableOpacity
onPress = {() => {
this.setState({ viewController: this.state.viewController++ })
this.props.navigation.navigate(
"ProductDetail", {
itemDataDetail: itemData,
businessname:this.props.navigation.state.params.businessname,
viewController: this.state.viewController,
})
}}>
<View>
<ImageBackground
source={{ uri: itemData.photo }}
style={{ width:'100%',aspectRatio: 1, borderRadius: 15, borderWidth:1, borderColor:"#FAFAFA", overflow: 'hidden'}}>
</ImageBackground>
<View style = {{ margin: 5}}>
<Text style = {{color: '#2E2E2E', fontWeight:"bold"}} numberOfLines={1}>{itemData.item}</Text>
<Text style = {{color: '#2E2E2E', fontSize: 12, fontWeight:"normal", alignSelf: 'flex-start'}} numberOfLines={1}>Available now | Sold out</Text>
<Text style = {{color: 'white', fontSize: 18, fontWeight:"bold", backgroundColor:"#DE1F38", alignSelf: 'flex-start', paddingHorizontal: 10,paddingVertical:2,borderRadius: 8,overflow: 'hidden', marginTop: 5}} numberOfLines={1}>${itemData.price}</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}}/>
}
每次触发新的拉刷新时输出数据重复
解决方案
我假设您的 api-call 返回整个产品列表
此行将 api-response-data 连接到您在组件状态中已有的产品列表
this.setState({results: [...this.state.results, response.data]});
试试这个...
this.setState({ results: response.data });
推荐阅读
- c++ - 通过运算符重载连接数组
- postgresql - 使用 joi 配置 Next JS 身份验证
- javascript - 我想在 JavaScript 中使用 rgb 生成随机颜色,但它不起作用
- python - 在excel文件中转置工作表
- c# - 如何将某些变量值存储在动态添加的控件中
- linux - 从数组中的 txt 文件中删除文本
- javascript - 无法获取/删除
- firebase - 如何将 3 个小部件合二为一?
- mongodb - 无法启动/停止/重启 mongodb 实例
- java - 如何通过 intellij 2020 或终端或 maven 插件使用资源文件构建 jar