Отображение массива объектов - невозможно получить значения в раскрывающемся списке

Question

Название в значительной степени объясняет мою проблему. Я выполнил макет некоторых данных, которые нужно отобразить в раскрывающемся списке, компонент выпадающего меню SUIR

mock.onGet("/slotIds").reply(200, {
  data: {
    slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }]
  }
});

Я обновляю состояние с извлечением данных

  const { data } = await axios.get("/slotIds");
  console.log("Slot IDs --> ", data);
  const slotIds = data.data;
  this.setState({ slotIds: slotIds });
  console.log(this.state.slotIds);
  //the above log outputs [Object, Object, Object] so slotIds is in fact an array

Затем я сопоставляю эти значения, чтобы отобразить id в выпадающем списке

        options={slotIds.map(id => {
          return {
            key: id.id,
            text: id.id,
            value: id.id
          };
        })}

Не могу заставить его работать, я отображаю значения неправильно или возвращаю неправильные значения?

У меня есть codesandbox , который воспроизводит проблему. Вам нужно будет нажать на кнопку Login в верхней части заставки. Выберите переключатель Slot Sec Officer, посмотрите на консоль, на которой будет показан успешный вызов API и как обновляется состояние slotIds. Я закомментировал функцию .map, потому что она вызывает не рендеринг компонента при выборе опции Slot Sec Officer.

Весь код Login находится внутри /components/Login.js. Класс SlotSecIdInputs содержит вызов API и фактический компонент <Dropdown>, который имеет функцию map.

Answer 1

У вас есть пара ошибок в SlotSecIdInputs:

1. Вы не определили свое состояние slotIds в конструкторе
2. Состояние по умолчанию должно быть определено какмассив, потому что вы отображаете выбранные элементы, которые впоследствии сохраняются как массив1013 * состояние, так что вы не можете отобразить его, и вы получите ошибку.После того, как вы загрузили slotIds, вы должны убедиться, что он не пустой, и после этого сделать отображение на него.

   Надеюсь, это поможет вам.