Arrays 使用.map（）仅在一个JSX元素中返回数组中的项

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

"destinations": [
        {
            "id": 8375,
            "name": "Bordeaux",
            "country": "France",
            "category": "wine"
        }, ETC

"seasonCategories": {
        "spring": [
            "wine",
            "wonder",
            "forest",
            "adventure",
            "food"
        ], ETC

我创建了一个函数，将数据输入下拉组件并对其进行过滤，但它并没有像我预期的那样返回：它只创建一个JSX

元素，其中列出了所有数组项的值。我需要它用数组中每个项的当前值生成一个新的JSX元素。如果我在最后一个map函数上调用

{el[index]}

，我会得到正确的值，因此我不明白为什么它不会在它们自己的

标记中生成每个值。我使用的函数是：

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>;
    });
}

功能类别（src，val）{
返回Object.keys（src）
.filter（（标志）=>{
返回标志===val；
})
.map（（el）=>{
设v=[]；
for（设i=0；i{
返回{el}；
});
}

我的下拉组件：

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;

从“React”导入React；
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
这个值=“”；
}
render（）{
返回(
{this.props.label}
{this.props.label}
{this.props.func}
);
}
}
导出默认下拉列表；

对于视觉思考者来说，这就是我在窗口看到的：

---

我想出来了！我在.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>;
      });

let keys=Object.keys（src）；
设j=[]；
for（设i=0；i