When I use async in componentDidMount, Component will Mount and Unmount again and again. Why? - reactjs

Question

When I call getCityName component will unmount and DidMount again and again, unless I remove async .All the code is running in nextjs.
this.state = {
bank_account: {
// bank_name: '',
// number: '',
// city: '',
// branch_name: ''
},
allCity: []
};
componentDidMount() {
const { owner_cellphone } = this.props;
this.getDraft(owner_cellphone);
this.fetchCity();
}
fetchCity = async () => {
const { data, error } = await getCity();
if (error) {
return;
}
console.log(data);
this.setState({ allCity: data });
};
getCityName = cityString => {
const { allCity } = this.state;
console.log(allCity);
if (!allCity || !cityString) {
return;
}
const cityArray = cityString.split(' ');
console.log(cityArray);
const targetProvince = allCity.find(item => item.code === cityArray[0]);
const targetCity = targetProvince.children.find(item => item.code === cityArray[0]);
return targetProvince.name + targetCity.name;
};
render() {
const { bank_account } = this.state;
const cityValue = this.getCityName(bank_account.city);
return (
<Item label="开户城市" icon={<Icon type="arrow-right" />} onClick={this.showCitySelect}>
<input
className="item-picker-input"
value={cityValue}
/>
</Item>
);
}

Answer 1

The reason it's not working because you are calling a async function from a sync function.
I am not sure it would work, but you can try..
getCityName = async (cityString) => {
const { allCity } = this.state;
console.log(allCity);
if (!allCity || !cityString) {
return;
}
const cityArray = cityString.split(' ');
console.log(cityArray);
const targetProvince = allCity.find(item => item.code === cityArray[0]);
const targetCity = targetProvince.children.find(item => item.code === cityArray[0]);
return targetProvince.name + targetCity.name;
};
render = async () => {
const { bank_account } = this.state;
const cityValue = await this.getCityName(bank_account.city);
return (
<Item label="开户城市" icon={<Icon type="arrow-right" />} onClick={this.showCitySelect}>
<input
className="item-picker-input"
value={cityValue}
/>
</Item>
);
}

Answer 2

getCityName = cityString => {
const { allCity } = this.state;
if (allCity === [] || !cityString) {
return;
}
const cityArray = cityString.split(' ');
let targetProvince = allCity.find(item => item.code === cityArray[0]);
if (targetProvince) {
let newProvince = JSON.parse(JSON.stringify(targetProvince));
const targetCity = newProvince.children.find(item => item.code === cityArray[1]);
return `${targetProvince.name} ${targetCity.name}`;
}
return '';
};
I think it might be a problem of deep copy.