Когда я использую async в componentDidMount, Component будет монтировать и размонтировать снова и снова.Зачем?

Question

Когда я вызываю getCityName, компонент будет размонтироваться, а DidMount снова и снова, если я не удалю асинхронный. Весь код выполняется в 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

    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 '';
    };

Я думаю, что это может быть проблемой глубокого копирования.

Answer 2

Причина, по которой это не работает, потому что вы вызываете асинхронную функцию из функции синхронизации.Я не уверен, что это сработает, но вы можете попробовать ..

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>

        );

}