FlatList의 onEndReached prop에 대해 질문드리려고 합니다!

<FlatList
            ListHeaderComponent={<YellowHeader />}
            bounces={false}
            onEndReached={() => this.getMoreData()}
            onEndReachedThreshold={1}
            showsVerticalScrollIndicator={true}
            keyExtractor={item => item.post_permlink}
            data={data}
            renderItem={this.renderItem}
          />

pagination 구현을 위해서 onEndReached prop으로 getMoreData라는 fetch 함수가 들어있는 함수를 실행하고 있습니다. 현재 스크롤을 가장 아래로 했을 때 추가로 데이터를 받아 오는 데에는 문제가 없습니다. 그런데 제일 처음 render가 됐을 때 스크롤을 내리지도 않았는데 getMoreData가 실행될 때도 있고 아닐 때도 있습니다. react-native github에도 같은 issue가 최근까지 꾸준하게 올라오고 있어서 방법을 계속 찾다가 여기에 질문 올리게 됐습니다! render 되자마자 onEndReached의 함수가 실행되지 않게 하는 방법이 혹시 있는지 궁금합니다! 읽어주셔서 감사합니다!

onEndReachedThreshold props를 제거 해 보셨나요 ??

현재 Flatlist는 버그가 있어서 글쓴이 분이 이야기 해 준 현상을 저도 겪어 본 적이 있습니다.

onEndReachedThreshold 를 먼저 빼고 진행 해 보시고

그래도 원하는 결과가 나오지 않는다면,

위 주소의 패키지를 한번 사용 해 보세요.

해당 문제를 다루고 있습니다.

더불어, 해당 문제에 대한 해결을 하신다면 방법을 함께 공유하면 좋겠습니다.

정리를 안 해 놓으면 또 까먹더라구요( 제가 그렇습니다. )

onEndReachedThreshold prop을 빼고 실행을 해도 똑같은 결과가 나왔습니다. 그래서 말씀해주신 package로 실행을 해봤는데 처음 render 될 때 2번 실행 되는 문제는 해결된 것 같습니다! 그런데 추가로 getMoreData를 실행할 때 2번씩 실행되고 있습니다. 완벽하게 해결하지는 못하는 것 같습니다… 더 한 번 찾아보고 안되면 안되는 대로 되면 되는 대로 공유하도록 하겠습니다!

저도 비슷한 문제가 있었어서

            keyExtractor={(item, index) => index.toString()}
            data={ this.state.users }
            renderItem={this.renderUsers}
            onEndReached={this.handleLoadMore}
            onEndReachedThreshold={0.1}
            refreshing={this.state.refreshing}
            ListFooterComponent={<View style={{ height: 56 }}/>}
            onRefresh={this.handleRefresh}

과거에 위와 같이 해주고

  private handleLoadMore = () => {
    if (this.state.loading) {
      return;
    }
   ...

위와같이 block 처리를 했습니다.

비슷한 아이디어로 이슈를 확인하시면 좋겠습니다.


도움이 되시면 좋겠습니다~!