Flatlist 下拉刷新频繁调用

最近遇到一个问题,当进入一个列表页面时,需要先自动下拉刷新,已达到刷新数据,我先把

showLoading设置为了true
constructor(props) {
        super(props);
        this.state={
            showLoading:true,
            dateSource:[],
        }
    }

结果出现了数据的频繁刷新,

解决办法:

1:先设置showLoading为false

constructor(props) {
        super(props);
        this.state={
            showLoading:false,
            dateSource:[],
        }
    }

2:若达到一进页面自动下拉刷新效果,在下面方法里设置

//渲染后调用
    componentDidMount(){
        this._requestData();
    }
_requestData = () =>{
                   //设为true
                    this.setState({showLoading: true});

                    let formData = new FormData();
                    
                    BaseFetch.post('',formData).then((responesJson) =>{
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 FlatList 中实现下拉刷新,你可以使用 FlatList 组件自带的 `refreshControl` 属性。这个属性允许你传入一个自定义的下拉刷新指示器。 首先,你需要定义一个状态来控制下拉刷新的状态,比如 `isRefreshing`。接下来,在 FlatList 组件中添加 `refreshControl` 属性,将其值设为一个 RefreshControl 组件。 下面是一个示例代码,展示了如何在 FlatList 中实现下拉刷新: ```javascript import React, { useState, useEffect } from 'react'; import { View, FlatList, RefreshControl } from 'react-native'; const MyComponent = () => { const [data, setData] = useState([]); const [isRefreshing, setIsRefreshing] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = async () => { // 模拟异步获取数据 setIsRefreshing(true); const response = await fetch('https://api.example.com/data'); const newData = await response.json(); setData(newData); setIsRefreshing(false); }; const onRefresh = () => { fetchData(); }; return ( <View> <FlatList data={data} renderItem={({ item }) => <ItemComponent data={item} />} keyExtractor={(item) => item.id} refreshControl={ <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} /> } /> </View> ); }; export default MyComponent; ``` 在这个示例中,我们使用了 `isRefreshing` 状态来控制下拉刷新的状态。当用户触发下拉刷新时,`onRefresh` 函数会被调用,然后我们通过异步请求获取最新的数据,并将其更新到 FlatList 中。当数据获取完成后,我们将 `isRefreshing` 设置为 `false`,停止下拉刷新的指示器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值