Javascript RefreshControll数据重复每次在React native中的ScrollView上拉刷新

说明
我在React Native中使用

RequestController

实现了一个pull请求，每次我都会在平面列表中反复添加相同的数据。我不是在平面列表中实现拉取请求，而是在包装平面列表的

滚动视图上实现拉取请求

行动

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>
          );
    }}/> 
}

import React，{Component}来自'React'；
从“react native”导入{视图、样式表、文本、按钮、模式、尺寸、滚动视图、文本输入、TouchableOpacity、状态栏、图像、平台、TouchableNativeFeedback、FlatList、ImageBackground、RefreshControl}；
从“axios”导入axios；
类主屏幕扩展组件{
状态={
刷新：错，
}
componentDidMount（）{
这是searchApi（）；
}
searchApi=async（）=>{
const response=等待axios.get（'http://73udkYid.ngrok.io/api/v1/products',{
标题：{
“x-auth-token”：“EYJFAWQIOI1ZDFJZZMM4YJIWYJBJZDQYMMJKNZUILCJPYXQIOJE2MD”
}
}
);
this.setState（{results:[…this.state.results，response.data]}）；
}
_onRefresh=（）=>{
this.setState（{刷新：true}）；
this.searchApi（）。然后（（）=>{
this.setState（{刷新：false}）；
});
}
render（）{
让最终结果=[]；
this.state.results.forEach（obj=>{
Object.keys（obj.forEach）（key=>{
最终结果推送（obj[键]）；
});
});
返回(
index.toString（）}
renderItem={（{item:itemData}）=>{
if（itemData.empty==true）{
返回
}
返回(
{
this.setState（{viewController:this.state.viewController++}）
this.props.navigation.navigate(
“产品详情”{
itemDataDetail:itemData，
businessname:this.props.navigation.state.params.businessname，
viewController:this.state.viewController，
})
}}>
{itemData.item}
现已发售|售罄
${itemData.price}
);
}}/> 
}

输出

每次触发新的拉刷新时都会复制数据
我假设您的api调用会返回整个产品列表

这一行将api响应数据添加到组件状态下已有的产品列表中

this.setState({results: [...this.state.results, response.data]});

试试这个

this.setState({ results: response.data });

您应该替换数据，而不是连接。请使用：

this.setState({ results: response.data });

此外，您应该使用FlatList“onRefresh”道具来实现刷新功能，而不是在父级上使用额外的滚动视图。
哦，我找到了一种方法。我只需要这样做。
this.setState（{results:[response.data]}）；
这是有意义的…因为您将新结果添加到存储在状态
this.setState（{results:[…this.state.results，response.data]}中的当前结果列表中）；
如何解决这个问题@Hend El SalhiIm new to React Native你能告诉我解决这个问题的简单方法吗？请检查下面的答案…我已经试过了，我关注我的结果，因为它们是从我的api调用返回的复杂承诺，这就是为什么我要将它们放在新数组中。有什么方法可以将它们放在新的arr中吗像我以前做的那样没有concatate吗？你能把这个
console.log记录下来吗（等待响应.数据）
？感谢您的帮助，您已经给了我有用的提示。我很感激。我知道，但是问题是，我从api调用返回的是包含id和属性的对象，所以我必须使用渲染函数下的一些步骤删除id，所以我决定将它们放入新数组中。感谢您的帮助，您已经给出了给我一个有用的提示。我很感激。在这种情况下，有一个更好的方法。你应该保持键值对不变，并生成一个新的ID数组，并将其提供给平面列表。然后在renderItem中，你将获得作为项的键，这样你就可以从主对象使用该键访问该对象，比如：renderItem（{item}）{const gameItem=this.state.results[item]}这样，您的数据将更易于管理和访问