FlatList onEndReached called before end reached

Viewed 1591

Im facing the problem that my Flatlist onEndReached method, calles to early. When ever the page is loaded the onEndReached method is called and mess up my userPicture array. Any ideas?

async onEndReached() {
    await this.setState({itemsToRender: 
    this.state.userPicture.slice(-1)[0].id})
    const data = await PictureService.getRandomPicutures(
      this.state.itemsToRe`enter code here`nder
    );
   const currentPictures = this.state.userPicture;
   const newArray = currentPictures.concat(data)
   await this.setState({userPicture: newArray, isFetching:false});
  }

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.userPicture}
          renderItem={this.renderItem}
          keyExtractor={item => item.id.toString()}
          onRefresh={() => this.handleRefresh()}
          refreshing={this.state.isFetching}
          onEndReached={this.onEndReached.bind(this)}
          onEndReachedThreshold={0.5}
        />
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    marginTop: 50
  }
});
0 Answers
Related