Как отображать несколько динамических параметров в поле выбора в React из Axios

У меня недоумевающий вопрос. Я получаю полезную нагрузку от вызова axios, которую мне нужно заполнить в поле выбора (раскрывающемся списке) в React, за исключением того, что полезная нагрузка, которую я получаю, представляет собой массив массивов. Имеется большой массив из (2) массивов двух элементов, два элемента которых представляют собой сокращенное имя идентификатора и полное имя. Мне нужно объединить эти два значения в один вариант. Например, структура полученных данных:

{
   "groups": [
      [
        "short_name_id",
        "longer_name"
      ]
]

Данные в поле выбора должны быть конкатенацией двух элементов, таких как: "short_name_id - long_name". каждый выбор выпадающего списка.

В вызове у меня есть вызов axios, который правильно возвращает данные:

componentDidMount() {
   axios.get('https://someurl.com/api/groups')
      .then(response => {
         console.info(response);
         this.setState({ data: response.data });
      })
      .catch(error => console.info(error.response));
}

В render() я устанавливаю реквизиты для возвращаемого объекта данных, но поле выбора не заполняется? Не знаете, как заставить два элемента массива отображаться как одна запись и заполнить состояние в поле выбора? Я не обращаюсь/не ссылаюсь на данные, которые находятся в состоянии, должным образом, учитывая структуру массива, я так не думаю?

render() {
   const { groups } = this.props;
      return (
         <label>
           Group:
              <select onChange = {this.handleInputChange}>
              {groups &&
                groups.length > 0 &&
                groups.map(group => {
                return <option key = {group} value = {group}>{group}</option>;
               })}
              </select>
          </label>
      );
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
783
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
render() {
   const { groups } = this.props;
      return (
         <label>
           Group:
              <select onChange = {this.handleInputChange}>
              {groups &&
                groups.length > 0 &&
                groups.map(group => {
                return <option key = {group[0]} value = {group[0]}>{group[0]} - {group[1]}</option>;
               })}
              </select>
          </label>
      );
}

Это должно работать, но лично я бы не стал хранить данные в виде массива массивов. Я бы предпочел хранить их как массив объектов, поэтому вместо того, чтобы выглядеть так:

[
  "short_name_id",
  "longer_name"
]

Это будет выглядеть так:

{
  "short_name_id": "value here",
  "longer_name": "value here"
}

Таким образом, ваш оператор возврата выглядит не так:

return <option key = {group[0]} value = {group[0]}>{group[0]} - {group[1]}</option>;

может выглядеть так:

return <option key = {group.short_name_id} value = {group.short_name_id}>{group.short_name_id} - {group.longer_name}</option>;

Другие вопросы по теме