im trying to set the state of something and its not working component did mount is set to async but when trying the same on my method it said async/await does nothing. this is in a jsx page. I know set state is asynchronous but i thought if componentdidmount was async then all functions called by it are async.
constructor(props) {
super(props);
// states
this.state = { newObject:"",supra:"",newObject:"",itemName:"",options:"",searchBar:[{locations:["country","region","area","city","neighborhood"]}]};
this.createNewPage=this.createNewPage.bind(this);
}
...
//to search by location.
async componentDidMount(){
//set possible options
let line=new URLSearchParams(window.location.pathname).get("searchCriteria");
//ignore and skip to else
if(line!=null){
let values=line.split(",");
let newPath="";
let possibleOptions=[];
values.map((value,index)=>
{
if(index!=0){
newPath+="/"+value;
}
});
//gets objects form all location type based on new path
axios.get(
'http://localhost:8080/'+"country"+newPath)
.then(res => {res.map(e=>{ let keyCode='<MenuWrapper id='+e.id+' name='+e.value+' supra='+null +'/>';
possibleOptions.concat(keyCode);});
//fix content
}).catch(
function (error) {
});
axios.get(
'http://localhost:8080/'+"region"+newPath)
.then(res => {res.map(e=>{ let keyCode='<MenuWrapper id='+e.id+' name='+e.value+' supra='+e.country +'/>';
possibleOptions.concat(keyCode);});
}).catch(
function (error) {
});
axios.get(
'http://localhost:8080/'+"area"+newPath)
.then(res => {res.map(e=>{ let keyCode='<MenuWrapper id='+e.id+' name='+e.value+' supra='+e.region +'/>';
possibleOptions.concat(keyCode);});
}).catch(
function (error) {
});
axios.get(
'http://localhost:8080/'+"city"+newPath)
.then(res => {res.map(e=>{ let keyCode='<MenuWrapper id='+e.id+' name='+e.value+' supra='+e.region +'/>';
possibleOptions.concat(keyCode);});
}).catch(
function (error) {
});
axios.get(
'http://localhost:8080/'+"neighborhood"+newPath)
.then(res => {res.map(e=>{ let keyCode='<MenuWrapper id='+e.id+' name='+e.value+' supra='+e.region +'/>';
possibleOptions.concat(keyCode);});
}).catch(
function (error) {
});
this.setState({options:possibleOptions});}
else{
let id=new URLSearchParams(window.location.pathname).get("id");
let category=new URLSearchParams(window.location.pathname).get("category");
let supra="";
//will set it to country
if(category===null){
await this.setState({type:"country"},() => {
console.log(this.state.type);
});
}
else{
this.setState({type:category},() => {
console.log(this.state.type)});
}
//if id exists get object
if(id){
axios.get(
'http://localhost:8080/'+category+'/'+id)
.then(res => {
this.setState({supra:res});
}).catch(
function (error) {
});
}
//function problem is stuck on.
this.createNewPage();
}
}
//content for new object
createNewPage(){
let keyCode="";
//will go into this one.
if(this.state.type==="country"){
keyCode="<div> <b>create a new country: </b><country id=null /></div>";
//new object does not initialise by keyCode
//
//
this.setState({newObject: keyCode }, () => {
console.log(this.state.newObject);
});
let x=this.state.newObject;
}
else if(this.state.type==="region"){
keyCode="<div> <b>create a new region:</b><region id=newItem country="+this.state.supra+"/></div>";
this.setState({newObject:keyCode},() => {
console.log(this.state.newObject);
});
}
else if(this.state.type==="area"){
keyCode="<div> <b>create a new area: </b><area id=newItem region="+this.state.supra+"/></div>";
this.setState({newObject:keyCode},() => {
console.log(this.state.newObject);
});
}
else if(this.state.type==="city"){
keyCode="<div> <b>create a new city: </b><city id=newItem region="+this.state.supra+"/> </div>";
this.setState({newObject:keyCode},() => {
console.log(this.state.newObject);
});}
else if(this.state.type==="neighborhood"){
keyCode="<div> <b>create a new: {this.state.supra}</b><neighborhood id=newItem city="+this.state.supra+"/> </div>";
this.setState({newObject:keyCode},() => {
console.log(this.state.newObject);
});
}
}
