В раскрывающемся списке не отображается элемент по умолчанию

Question

Я использую выпадающий список semantic-ui-реакции, который у меня работает просто отлично. Проблема в том, что в моем бланке я получаю данные из базы данных, используя хранилище Mobx. У меня есть настройки массива для опций в выпадающем списке. когда форма загружается из хранилища, текстовое поле для раскрывающегося списка будет пустым, если я нажму на раскрывающееся меню, то увижу, что выбранный параметр выделен жирным шрифтом. Как получить текстовое поле для отображения параметров по умолчанию. Я включил код ниже, если кто-нибудь может посмотреть на него и дать мне представление о том, что мне нужно делать.

Спасибо за вашу помощь.

Вот код для выпадающего списка:

<div className="col-sm-3">
  <div className="bg-primary text-white text-center">
    Driver
  </div>
<div>
  <Dropdown
    selection
    fluid
    id="driver"
    name="driver"
    ref="driver"
    onChange={this.handleChange}
    value={this.props.EquipmentStore.truck_detail.driver}
    options={this.props.EquipmentStore.driver_list}/>
  </div>
</div>

Вот как я строю список_драйверов. Я в основном получаю список пользователей из базы данных и создаю массив со значениями и текстовыми полями

let newUserItem = {
    value: getUser.id,
    text: getUser.first_name + " " + getUser.last_name
};
this.driver_list.push(newUserItem)

Значение в truck_detail.driver - это числовое значение, которое совпадает со значением в поле значения в поле значения driver_list ... все работает нормально, я не могу получить текстовое значение, отображаемое в текстовом поле для раскрывающийся список по умолчанию.

Вот код, который я использую для построения списка опций:

async loadDriverList() {
    let endpoint = '/api/users/profile/?owner=True';
    this.driver_list.length = 0;
    let lookupOptions = {
        method: "GET",
        headers: {
            'Content-Type': 'application/json'
        }
    };
    try {
        const response = await fetch(endpoint, lookupOptions);
        const profile_list = await response.json();
        const userItem = {value:0, text:'Select Driver'};
        this.driver_list.push(userItem);
        let array_length = profile_list.length;
        for (let i = 0; i < array_length; i++) {
            let ownerId = profile_list[i].user;
            let endpoint = '/api/users/users/' + ownerId + '/';
            let userList = await fetch(endpoint, lookupOptions);
            let getUser = await userList.json();
            let newUserItem = {
                value: getUser.id,
                text: getUser.first_name + " " + getUser.last_name
            };
            this.driver_list.push(newUserItem)
        }
    } catch(e) {
        console.log(e)
    }
}

Answer 1

После большого разговора с Предрагом Беоканиным я решил эту проблему.Все сводится к тому, что моя форма (с раскрывающимся списком) получала визуализацию до того, как список параметров был полностью заполнен.В моем приложении есть форма, которая показывает список элементов, после того, как вы щелкнете по элементу, он отобразит подробную форму этого элемента в списке.Первоначально я пытался заполнить свой список опций, как только вы нажмете на элемент, который вы хотите просмотреть детали.Поскольку список опций в основном является статическим списком, я заполняю этот список, когда вы просматриваете первую форму.Теперь, когда вы нажимаете на элемент, чтобы просмотреть, выпадающие опции полностью заполнены и работают так, как я ожидал.

Спасибо за вашу помощь Предраг.