setState when fetch data that leads Render in loop - reactjs

Question

The problem is when i create paginaion button, the render is running in loop.
As i call api from external that i can store all data in dataset. I know something went wrong but i am not able to solve it personally, so can any one suggest solutions to help improve? Thanks.
SearchScreen.js
componentDidMount() {
this.setState({isLoading: true},function(){
this.fetchData(this.url)
});
}
async fetchData(query, pageNo) {
try {
let response = await fetch(query);
let responseText = await response.json();
let json = await this.getData(responseText, pageNo);
} catch(error) {
console.error(error);
}
}
async getData(responseText, pageNo){
this.setState({
data: responseText.response.listings,
isLoading: false,
currentPage: pageNo,
lastPage: responseText.response.total_pages
});
}
PropertyList(arr, navigate) {
return arr.map(function(property, i){
return(
<TouchableHighlight style={styles.button} underlayColor='#99d9f4'
key={i} onPress={() => navigate('PropertyView', {property: property})} >
<View key={i} style={styles.rowContainer}>
<Image style={styles.thumb} source={{ uri: property.img_url }} />
<View style={styles.textContainer}>
<Text style={styles.price}>{property.price_formatted}</Text>
<Text style={styles.title}
numberOfLines={2}>{property.title}</Text>
</View>
</View>
</TouchableHighlight>
);
});
}
SetPage = (pageNo) =>{
this.url = this.GetChangedUrl(pageNo);
this.fetchData(this.url, pageNo);
}
GetChangedUrl = (pageNo) =>{
return this.url.replace(/(page=\d+&)/g, 'page='+pageNo+ '&');
}
_formArray = (pageNo) =>{
if (pageNo == 1){
return [pageNo, pageNo+1, pageNo+2];
}else if (pageNo == this.lastPage){
return [pageNo-2, pageNo-1, pageNo];
}else{
return [pageNo-1, pageNo, pageNo+1];
}
}
_createPageButton = (currentPage) =>{
var array = this._formArray(currentPage);
var btnBody = array.map( (item, i) => {
return (
<TouchableHighlight style={styles.pageButton} key={i} Onpress={this.SetPage(i)}>
<Text style={styles.text} >{i + 1}</Text>
</TouchableHighlight>
)
});
return btnBody;
}
render() {
const { navigate } = this.props.navigation;
const { params } = this.props.navigation.state;
this.url = params.url;
let propertyList;
if (this.state.isLoading){
propertyList = (
<ActivityIndicator size={108} style= {styles.indicator}/>
)
}else{
propertyList = (
<View >
<View >
<ScrollView >
{this.PropertyList(this.state.data, navigate)}
<View style={styles.separator}/>
<View style={styles.pageContainer}>
{this._createPageButton(this.currentPage)}
</View>
</ScrollView>
</View>
</View>
)
}
return (
<View>
{propertyList}
</View>
)
}
}
Whole Code from here

Answer 1

I believe this is caused by:
Onpress={this.SetPage(i)}
which should be changed to:
Onpress={() => this.SetPage(i)}
Your code calls setPage when rendering and passes to onPress the result of the call, causing change of page, and therefore a new load, on every render.