Is it possible to update the items after fetch? about react-native-picker-select HOT 6 CLOSED

import React from 'react';
import {StyleSheet, View, TouchableOpacity, Text, ImageBackground, Dimensions} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import Image from 'react-native-scalable-image';
import axios from 'axios';

import backgroundImage from '../../assets/filterScreenBackground.jpg';
import logo from '../../assets/filterScreenLogo.png';

class FilterScreen extends React.Component {

    state = {
        selectedCity: null,
        cities: [],
        selectedSpecialty: null,
        specialties: [],
    };


    componentDidMount() {

        this.fetchCities();

        setTimeout(() => {
            this.setState({
                selectedCity: '1',
            });
        }, 1000);

        setTimeout(() => {
            this.setState({
                selectedSpecialty: '1',
            });
        }, 2000);
    }


    fetchCities() {

        let baseURL = 'http://127.0.0.1:8000/app/cities';
        return axios.get(baseURL).then(response => {
                if (response.data.error === false) {

                    let cities = response.data.data.map(item => ({
                        label: item.name,
                        value: item.id
                    }));

                    this.setState({
                        cities:cities
                    });
                }
            }
        ).catch(
            () => alert('Something went wrong! :(')
        );
    };

    render() {
        return (
            <ImageBackground style={styles.backgroundImage} source={backgroundImage}>
                <View style={[styles.container, styles.logoContainer]}>
                    <Image
                        width={Dimensions.get('window').width * 0.8}
                        source={logo}
                        style={styles.logo}
                    />
                </View>
                <View style={[styles.container, styles.formContainer]}>
                    <RNPickerSelect
                        placeholder={{
                            label: 'Zgjidhni qytetin...',
                            value: null,
                        }}

                        items={this.state.cities}

                        onValueChange={(value) => {
                            this.setState({
                                selectedCity: value,
                            });
                        }}

                        style={{...pickerSelectStyles}}

                        value={this.state.selectedCity}
                    />
                    <View style={{paddingVertical: 5}}/>
                    <RNPickerSelect
                        placeholder={{
                            label: 'Zgjidhni specialitetin...',
                            value: null,
                        }}

                        items={this.state.specialties}

                        style={{...pickerSelectStyles}}

                        onValueChange={(value) => {
                            this.setState({
                                selectedSpecialty: value,
                            });
                        }}

                        value={this.state.submitButtonContainer}
                    />
                    <View style={[styles.submitButtonContainer]}>
                        <TouchableOpacity style={styles.submitButton} onPress={() => {
                            console.log(this.state.cities);
                        }}>
                            <Text style={styles.submitButtonText}> GJEJ DOKTORIN </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        padding: 30,
        backgroundColor: "rgba(8, 35, 79, 0.75)"
    },
    logoContainer: {
        width: "100%",
        height: "40%",
    },
    logo: {
        width: '100%'
    },
    formContainer: {
        height: "60%",
        justifyContent: 'flex-start'
    },
    backgroundImage: {
        flex: 1
    },
    submitButtonContainer: {
        flex: 1,
        width: '100%',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    submitButton: {
        width: "100%",
        height: 50,
        marginTop: 20,
        alignItems: 'center',
        backgroundColor: '#1aa2b3',
        padding: 10,
        justifyContent: 'center'
    },
    submitButtonText: {
        color: "white",
        fontSize: 15,
        fontWeight: 'bold'
    }
});

const pickerSelectStyles = {
    inputIOS: {
        fontSize: 16,
        paddingTop: 13,
        paddingHorizontal: 10,
        paddingBottom: 12,
        borderColor: 'gray',
        borderRadius: 4,
        backgroundColor: 'transparent',
        color: 'white',
    },
    inputAndroid: {
        color: 'white'
    },
    placeholderColor: 'white',
    underline: {
        borderTopWidth: 0
    },
    icon: {
        position: 'absolute',
        backgroundColor: 'transparent',
        borderTopWidth: 5,
        borderTopColor: 'white',
        borderRightWidth: 5,
        borderRightColor: 'transparent',
        borderLeftWidth: 5,
        borderLeftColor: 'transparent',
        width: 0,
        height: 0,
        top: 20,
        right: 15,
    },
};

export default FilterScreen;