我有一个困惑的问题。我正在接收来自axios调用的有效载荷，我需要将其填充到React中的选择（下拉）框中--除了我接收的有效载荷是数组的数组。接收到一个（2）两个元素数组的大数组，这两个元素是一个速记ID名，以及完整名称。我需要将这两个值连接到一个选项中。例如，收到的数据的结构:
{
"groups": [
[
"short_name_id",
"longer_name"
]
]
select框中的数据应该是两个元素的串联，例如:“short_name_id-longer_name”我认为我不必手动将这两个值串联在一起，然后放置在state中，而是在每个select下拉选项中一起显示它们。
在调用中，我有一个正确返回数据的axios调用:
componentDidMount() {
axios.get('https://someurl.com/api/groups')
.then(response => {
console.log(response);
this.setState({ data: response.data });
})
.catch(error => console.log(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>;
