从Array.map（）中排除项目

Question

我正在尝试排除Packages中包含packageData.type的项目。仅显示包含packageData为packageData.type的项目的Add-on。

数组为例

{
  "packageData": [
    {
      "title": "Title 1",
      "type": [
        "Packages"
      ]
    },
    {
      "title": "Title 2",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 3",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 4",
      "type": [
        "Add-on"
      ]
    }
  ]
}

这就是我当前尝试删除结果为零的结果的方式。

<ul>
  {packageData.map(function() {
    if (packageData.type ==! "Packages") {
     return (
      <li key={packageData.id}>
        <a>
          <img src={packageData.heroImage.sizes.src} alt=""/>
          <h3>{packageData.title}</h3>
        </a>
      </li> );
    } else {
      return null;
    };
  })}
</ul>

我该如何进行这项工作？还是应该先显示这些结果，然后再显示map返回的项目？

Answer 1

您必须在map之前使用filter，Filter将过滤数组，然后map将遍历数组。下面是示例代码

var data = {
  "packageData": [
    {
      "title": "Title 1",
      "type": [
        "Packages"
      ]
    },
    {
      "title": "Title 2",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 3",
      "type": [
        "Add-on"
      ]
    },
    {
      "title": "Title 4",
      "type": [
        "Add-on"
      ]
    }
  ]
};

data.packageData.filter((item) => { return item.type[0] !== 'Packages' }).map((item)=> { console.log(item); });