时间戳

首页 > 解决方案 > 过滤数组，然后在数组中映射数组

javascript - 过滤数组，然后在数组中映射数组

问题描述

很确定我错过了一些简单的东西，但是这段代码让我很头疼。

我array在本地json文件中有一个

{
  "type": [
    {
      "name": "Accommodation",
      "icon": "",
      "subcategory": [
        "Hotels",
        "Motels",
        "Bed & Breakfasts"
      ]
    },
    {
      "name": "Guided Tours",
      "icon": "",
      "subcategory": [
        "Audio & Self Guided",
        "Cruises, Sailing & Water",
        "Food, Wine & Nightlife"
      ]
    }
  ]
}

并导入到 React 组件中

import { type } from './assets/json/company-type.json';

然后我正在使用filterof name（companyType它基于一个或的select值。在我映射返回的项目之前AccommodationGuided Toursmapsubcategory

<ul>
  {type
    .filter(item => {
      return item.name === companyType;
    })
    .map(item => {
      item.subcategory.map(subcategory => {
        <li key={subcategory}>
          <label id={subcategory} htmlFor={subcategory}>
            <input
              type="radio"
              name={subcategory}
              value={subcategory}
            />
            <span />
            {subcategory}
          </label>
        </li>;
      });
    })}
</ul>

但是，没有返回任何内容。但是，如果我log subcategory在控制台中返回每个。我错过了什么？

标签： javascript

解决方案

这是因为您没有从 .map() 方法返回。使用此修改后的代码，它将按预期工作

<ul>
    {type
      .filter(item => {
        return item.name === "Accommodation";
      })
      .map(item => {
        return item.subcategory.map(subcategory => {
          return (
            <li key={subcategory}>
              <label id={subcategory} htmlFor={subcategory}>
                <input
                  type="radio"
                  name={subcategory}
                  value={subcategory}
                />
                <span />
                {subcategory}
              </label>
            </li>
          );
        });
      })}
 </ul>

代码沙盒链接： https ://codesandbox.io/s/4881483j7x

推荐阅读