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

Question

新的反应和仍在学习。我有一个任务是创建一个包含三个下拉列表的过滤器组件，该组件从 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]}最后一个 map 函数，我会得到正确的值，所以我不知道为什么它没有在自己的<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;

对于您的视觉思考者，这就是我在窗口中看到的内容： 我当前代码的下拉结果

标签： arraysreactjsselectjsxdropdown

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