cannot update during an existing state transition an existing state trasition (such as within render or another components's constructor). ender methods should be a pure function of props and state

import React, { Component } from 'react';
import {
Button,
StyleSheet,
ImageBackground,
Dimensions,
View,
TextInput,
KeyboardAvoidingView,
ScrollView,
Picker,
TouchableHighlight,
Text
} from 'react-native';
import {Actions} from 'react-native-router-flux'
export default class ComplaintDetailsEdit extends Component<{}> {

constructor(props) {
super(props);
this.state={Relationship:'',Name:'',phno:'',email:'',address:'',complianttype:'',location:'',summary:'',locations:[],ctypes:[],text:''};
}
//state={Relationship:'',Name:'',phno:'',email:'',address:'',complianttype:'',location:'',summary:'',locations:[],ctypes:[]};
renderLocation()
{
fetch('http://wbdemo.in/kscpcr-v1.3/complaints/actions_android/fetch_all_locations.php').then(response => response.json())
.then(data => this.setState({ locations: data }));
return this.state.locations.map(lcnt => )

}
Complaintype()
{
fetch('http://wbdemo.in/kscpcr-v1.3/complaints/actions_android/fetch_all_complaints.php').then(response => response.json())
.then(data => this.setState({ ctypes: data }));
return this.state.ctypes.map(ctyp => );

}
render() {
return (

this.setState({text: itemValue})}>

this.setState({Name})}
onSubmitEditing={()=> this.phoneInput.focus()}/>

this.phoneInput =input}
// onChangeText={phno => this.setState({phno})}
onSubmitEditing={()=> this.EmailInput.focus()} />

this.EmailInput =input}
onSubmitEditing={()=> this.AddressInput.focus()}/>

this.AddressInput =input}
onSubmitEditing={()=> this.ComplaintInput.focus()}/>

this.setState({language: itemValue})}>

{this.Complaintype()}

this.setState({language: itemValue})}>

{this.renderLocation()}

this.ComplaintInput =input}/>

Save and continue

Cancel

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignSelf: 'stretch',
width: null,
padding:20,
backgroundColor:"#B73527",

},
formstyle:{
marginTop:0,
backgroundColor:'#F1F1F1',
borderRadius:3,
},
buttonContainer:{
paddingVertical:15,
marginBottom:10,
opacity:20,
},
textInputStyle:{
color:'#000000',
padding:10,
},
ButtonStyle:{
margin:10,
alignItems:'center',
backgroundColor:'#6E1307',
},
btntextInputStyle:{
color:'#FFFFFF',
padding:10,
},
});

The error 'cannot update during an existing state transition' occurs because fetch calls in renderLocation and Complaintype trigger setState during render. Move these side effects to componentDidMount or a similar lifecycle method. Check the React Native component's constructor and render methods to ensure state updates are not triggered during rendering. Verify the fix by running the app and ensuring the pickers populate without errors.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.