RefreshControll 数据重复每次都在 React native 中拉动以刷新 ScrollView

Question

描述
我在 React Native 中使用 RequestController 实现了拉取请求，每次我拉取以刷新相同的数据时，都会一遍又一遍地在平面列表中添加。我不是在 Flat 列表中而是在包裹了 FlatList.

的 ScrollView 上实现了拉取请求

操作数

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

输出
每次触发新的拉取刷新时都会复制数据

Answer 1

我假设您的 api-call returns 整个产品列表

此行将 api-response-data 连接到您的 component-state

中已有的产品列表

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

试试这个...

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

Answer 2

您应该替换数据而不是串联。使用：

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

此外，您应该使用 FlatList 'onRefresh' 属性来实现刷新功能，而不是在父级上使用额外的 ScrollView。

Answer 3

哦，我找到办法了。我只需要这样做。 this.setState({results: [response.data]});

Answer 4

我遇到了和你一样的问题，当我刷新时，数据是(data)+[(data)+(new_data)].

这里发生的是数据被添加到这个变量的数组中：results。为防止这种情况，您必须首先清除此变量：results。所以您的代码将如下所示。

state = {
        refreshing: false,

        results : [],   
}

当API运行时，这个数组将填充results[{some_data},{some_data},{some_data},..],

刷新时-> 第一：结果将为空，第二：用来自 API.

的新添加数据重新分配该数组

_onRefresh = () => {
        this.setState({results: []});
        this.setState({refreshing: true});
        this.searchApi().then(() => {
          this.setState({refreshing: false});
        });
    }

RefreshControll 数据重复每次都在 React native 中拉动以刷新 ScrollView

RefreshControll data duplicate everytime do pull to refresh on ScrollView in React native

javascript

uirefreshcontrol

react-native