0.595 HOOK使用时 FlatList onEndReached 钩子函数多次加载 后不加载问题



  • 代码import React, {useEffect, useState} from 'react';
    import {
    View, Text, Image,
    TouchableOpacity,
    PermissionsAndroid,
    StyleSheet,
    ScrollView,
    Platform,
    ImageBackground,
    NetInfo,
    Dimensions,
    FlatList,
    RefreshControl, Linking
    } from 'react-native';
    import {Flex} from '@ant-design/react-native';
    import {connect} from 'react-redux';
    import {bindActionCreators} from "redux"
    import {commonCss, scaleFont, scaleSize, deviceWidthDp} from '../../../../commonCss/common'
    import {Route, NavHead, Loading, NoData} from "../../../../../Lib";
    import RefreshListView, {RefreshState} from "../../../../component/RefreshListView"
    import HistoryItem from '../../component/historyItem'
    import {getMainOrderHistorical} from "../../../homePage/actions/homeAction";

    const Ios = Platform.OS === 'ios';

    // function renderItem({item,index}) {
    // return (
    // <HistoryItem item={item} index={index} ></HistoryItem>
    // )
    // }
    function test() {
    console.log('1')
    }

    function HistoryList() {
    const [historyList, setHistoryList] = useState([])
    const [loading, setLoading] = useState(true)
    const [refreshState,setRefreshState]=useState(RefreshState.Idle)
    const [page, setPage] = useState(0)
    useEffect(() => {
    getMainOrderHistorical(page, 8).then((val) => {
    setHistoryList(historyList.concat(val))
    setLoading(false)
    setRefreshState(RefreshState.Idle)
    console.log(page)
    })
    }, [page])

    return (
        // loading ? <Loading haveScroll/> :
        <FlatList
            data={historyList}
            keyExtractor={this._keyExtractor}
            onEndReached={test()}
            onEndReachedThreshold={0.2}
            renderItem={({item, index}) => {
                return (
                    <HistoryItem data={item} index={index}></HistoryItem>
                )
    
            }
            }
    
        />
    // {/*<RefreshListView*/}
    //         {/*data={historyList}*/}
    //         {/*keyExtractor={(item, index: number) => {*/}
    //             {/*return index.toString()*/}
    //         {/*}}*/}
    //         {/*showsVerticalScrollIndicator={false}*/}
    //         {/*renderItem={({item, index}) => {*/}
    //             {/*return (*/}
    //                 {/*<HistoryItem data={item} index={index}></HistoryItem>*/}
    //             {/*)*/}
    //         {/*}*/}
    //         {/*}*/}
    //         {/*refreshState={refreshState}*/}
    //         {/*footerRefreshingText='玩命加载中 >.<'*/}
    //         {/*footerNoMoreDataText='-我是有底线的-'*/}
    //         {/*footerEmptyDataText='-好像什么东西都没有-'*/}
    //         {/*onHeaderRefresh={() => {*/}
    //             {/*console.log('321')*/}
    //             {/*// this.onHeaderRefresh()*/}
    //         {/*}}*/}
    //         {/*onFooterRefresh={() => {*/}
    //             {/*// setRefreshState(RefreshState.FooterRefreshing)*/}
    //             {/*// setPage(page+1)*/}
    //             {/*console.log('A')*/}
    //         {/*}}*/}
    )
    

    }

    function Revitalization() {

    return (
        <ScrollView style={commonCss.bc_f6f7fd}>
            <View style={commonCss.bc_fff}>
                <NavHead title={'订单历史'}/>
            </View>
            <View>
                <View style={[commonCss.margin_Hor15, commonCss.bc_fff, commonCss.margin_t15, {borderRadius: 8}]}>
                    <View style={commonCss.flex_1}>
    
                        <HistoryList/>
                    </View>
                </View>
            </View>
        </ScrollView>
    
    )
    

    }

    export default Revitalization



  • onEndReached早就被吐槽几年了,还不如自己监听onScroll靠谱。