У меня недоумевающий вопрос. Я получаю полезную нагрузку от вызова 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>
);
}
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>;