scrolling the bar to the top once, but onYReachStart() is triggered multiple times?

When I scroll the bar just once to the top to load more messages, `onYReachStart()` is triggered multiple times. Meanwhile, when I first click the chat user (if I don't click, I won't see the chat page), the chat page shows and `onYReachStart()` is triggered once automatically. My `onYReachStart()` code is as below ( `this.state.noMoreMessages === true` if there is no more messages to load and vice versa ):

```
async onYReachStart(e) {
console.log('YReachStart!!!!!!', this.state.loadingMore, this.state.noMoreMessages); // if onYReachStart is triggered, you'll see this line
if (this.state.loadingMore) {
return;
}
// this.setState({loadingMore: true});
if (this.state.noMoreMessages === false) {

await fetch('http://192.168.2.94:8585/httpserver/testing', {
method: 'POST',
headers: new Headers({'content-type' : 'application/json'}),
body: JSON.stringify({
mode: 'history1',
id: this.state.portId,
num: this.getCount(this.state.msgDataList, this.state.loadedMsgList)
})
})
.then (res => res.json())
.then (data => {
console.log(data);
const received_loaded_messages = data.information;
this.setState({noMoreMessages: data.no_more_message});

var messages = [];
let list = received_loaded_messages;
list.reverse().forEach((val, i) => {
messages.push(



)

this.setState({
loadedMsgList: messages.reverse().concat(this.state.loadedMsgList),
loadingMore: false
});
})
.catch(function (error) {
console.log(error);
});
} else {return;}
}
```