问如何在componentDidMount函数中调用异步函数？

EN

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
*/

import React, { Component } from 'react';
import {
    StyleSheet, Text, View, ActivityIndicator, AsyncStorage,
    Image, ToastAndroid, TouchableOpacity, FlatList
} from 'react-native';

export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isLoadingData: true,
            dataSourceEmpty: null,
            favorites: null
        }
    }

    componentDidMount() {
        return fetch('http://barcelonaapi.marcpous.com/bicing/stations.json')
            .then((response) => response.json())
            .then((JsonResponse) => {

                this.setState({
                    isLoadingData: false,
                    dataSourceEmpty: JsonResponse.data.bici,
                    favorites: null
                })
            })
            .catch((error) => {
                console.log(error);
            });
    }

    _touchListener = (item) => {
        alert("ID is:" + item.id + "\n"
            + "Latitude is: " + item.lat + "\n"
            + "Longitude is:" + item.lon)
    };

    makeFavorite(item) {
        this.saveData(item);
        ToastAndroid.show(
            'This station has been added to favorites!',
            ToastAndroid.SHORT
        );
    }

    saveData(station) {
        AsyncStorage.setItem(station.id + "", station.name);
    }

    DATABASE_getAllBusStations = () => {
        return new Promise(async (resolve, reject) => {
            try {
                let keys = await AsyncStorage.getAllKeys();
                resolve(keys)
            } catch (error) {
                reject(new Error('Error getting keys from AsyncStorage: ' +
                    error.message))
            }
        });
    }

    checkifInDatabase = async () => {
        try {
            var keys = await this.DATABASE_getAllBusStations();
            this.setState({
                isLoadingData: true,
                dataSourceEmpty: null,
                favorites: keys
            })
        } catch (error) {
            console.log(error);
        }
    }

    render() {
        if (this.state.isLoadingData) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" animating />
                </View>
            );
        }
        else {
            return (
                <View style={styles.container}>
                    <Text style={styles.header}>
                        BARCELONA BUS STATIONS
              </Text>
                    <FlatList
                        data={this.state.dataSourceEmpty}
                        renderItem={({ item }) => {
                            let source = './Assets/fav.png';
                            // if(this.state.favorites.includes(item.id))
                            // {
                            //   source = './Assets/favblack.png';
                            // }
                            return <TouchableOpacity style={styles.item}
                                onPress={() => this._touchListener(item)}>
                                <View style={styles.row}>
                                    <Text style={styles.textStyle}>
                                        {item.name}
                                    </Text>
                                    <View style={styles.buttonStyle}>
                                        <TouchableOpacity onPress=
                                            {() => this.makeFavorite(item)}>
                                            <Image
                                                source={require(source)}
                                                style={styles.imageStyle}
                                            />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        }
                        }
                        keyExtractor={(item, index) => index.toString()}
                    />
                </View>
            );
        }
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    indicator: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    row:
    {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    item: {
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        backgroundColor: 'skyblue'
    },
    header:
    {
        backgroundColor: '#F03209',
        textAlign: 'center',
        padding: 10,
        color: 'skyblue',
        fontSize: 20
    },
    imageStyle:
    {
        width: 50,
        height: 50
    },
    textStyle:
    {
        padding: 10
    }
});