当我在componentDidMount中使用async时，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 = 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 '';
    };

我认为这可能是深层复制的问题。