Выбранное значение из раскрывающегося списка реакции семантического пользовательского интерфейса не отображается при выборе

Question

Я не могу получить выбранное значение из раскрывающегося списка, чтобы отобразить его внутри раскрывающегося списка после его выбора. Правильное значение устанавливается (отображается через консоль), но не отображается внутри фактического раскрывающегося списка

    const onSlotIdChange = (e, data) => {
      console.log(props);
      console.log("slotId fired, value ---> ", data.value);
      props.setFieldValue("slotId", data.value);
    };

Фактический компонент здесь

  <Dropdown
    id="slotId"
    value={slotId}
    onChange={onSlotIdChange}
    options={slotIds.map(id => {
      return {
        key: id.id,
        text: id.id,
        value: id.id
      };
    })}
  />

У меня была проблема, подобная этой, и ранее было принято решение использовать что-то вроде props.setFieldValue("slotId", e.currentTarget.textContent);, но я пробовал это, и в этом случае это не работает. <Dropdown> компонент от Semantic UI реагирует

У меня есть коды и поле здесь . Как только вы попадете на заставку, перейдите на страницу Login с помощью кнопки вверху. Выберите Slot Sec officer из группы радиостанций, в ней будет 3 выпадающих списка, 2-й и 3-й выпадающие списки (slotId и deviceId) - вот где у меня проблема. Если вы открываете консоль и делаете выбор, значение устанавливается правильно, но значение не отображается в раскрывающемся списке после его выбора.

Код для выпадающих в классах getSlotIds и getDeviceIds. и методы onChange находятся внутри FormikLoginForm класса

Answer 1

Это потому, что вы не устанавливаете состояние после того, как пользователь выбирает значение, как вы делали в «Роли сотрудника службы безопасности слота» (это правильно, см. Строку 246 в ваших кодах и окне).
Например, чтобы исправить выпадающий список «идентификатор устройства», после строки 258 я поместил этот код в строку 259:

this.setState ({deviceId: data.value});

и это работает. То же самое нужно сделать для slotId после строки 253:

this.setState ({slotId: data.value});