数组中的项使用.map()仅在一个JSX元素中返回

Question

新的反应和仍在学习。我的任务是创建一个具有三个dropsdown的过滤器组件，该组件从JSON文件中获取信息。其想法是，一旦第一个下拉列表具有选定值，第二个下拉列表中的结果将被过滤。JSON格式为：

"destinations": [
{
"id": 8375,
"name": "Bordeaux",
"country": "France",
"category": "wine"
}, ETC
"seasonCategories": {
"spring": [
"wine",
"wonder",
"forest",
"adventure",
"food"
], ETC

我已经创建了一个函数，该函数将数据馈送到下拉组件中并对其进行过滤，但它并没有像我预期的那样返回：它只创建一个JSX<option>元素，其中列出了所有数组项的值。我需要它来生成一个新的JSX元素，其中包含数组中每个项的当前值。如果我在最后一个映射函数上调用{el[index]}，我会得到正确的值，所以我不知道为什么它没有在自己的<option>标记中生成每个值。我使用的功能是：

function funcCategories(src, val) {
return Object.keys(src)
.filter((flag) => {
return flag === val;
})
.map((el) => {
let v = [];
for (let i = 0; i < src[el].length; i++) {
v.push(src[el][i]);
}
return v;
})
.map((el) => {
return <option className="Dropdown__option">{el}</option>;
});
}

我的下拉组件：

import React from 'react';
class Dropdown extends React.Component {
constructor(props) {
super(props);
this.value = '';
}
render() {
return (
<div className="Dropdown__wrapper">
<label className="Dropdown__label">{this.props.label}</label>
<select
className="Dropdown__select"
value={this.props.value}
onChange={this.props.handleSelect}
>
<option className="Dropdown__option">{this.props.label}</option>
{this.props.func}
</select>
</div>
);
}
}
export default Dropdown;

对于你们这些视觉思考者来说，这就是我在橱窗里看到的：我当前代码的下拉结果

Answer 1

我想通了！我在.filter((方法中推送数组对象，而不是每个数组的元素。不是最干净的代码，但它可以工作：

let keys = Object.keys(src);
let j = [];
for (let i = 0; i < keys.length; i++) {
if (keys[i] === val) {
alert(keys[i] + ' === ' + src[keys[i]].length)
for (let h = 0; h < src[keys[i]].length; h++) {
j.push(src[keys[i]][h]);
}
}
}
return j.map((el) => {
return <option className="Dropdown__option">{el}</option>;
});