javascript - 从 Array.map() 中排除项目

Question

我试图排除 packageData.type 中包含 Packages 的项目。仅显示包含 packageData.type 项目的 packageData 作为 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>

我怎样才能使这项工作？或者我应该在显示之前过滤这些结果，然后映射返回的项目吗？

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