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

【问题标题】：Items in array are returned in only one JSX element using .map()使用 .map() 仅在一个 JSX 元素中返回数组中的项目
【发布时间】：2021-08-04 05:51:45
【问题描述】：

刚开始做出反应，仍在学习。我有一个任务是创建一个带有三个下拉列表的过滤器组件，该组件从 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;

对于视觉思考者来说，这就是我在窗口中看到的内容： Dropdown result of my current code

【问题讨论】：

标签： arrays reactjs select jsx dropdown

【解决方案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>;
      });

【讨论】：