javascript - 在reactjs中正确过滤其他数组中的数组

Question

您好，我第一次尝试使用react，但我的过滤功能遇到了一些问题。代码如下:

这是我组件中的渲染方法:

const categoryFilter = this.state.appItems.filter(item =>
      item.categories.filter(str => {
        return str.includes(active);
      })
    );

const appList = categoryFilter.map(appItem => (
      <AppItem appItem={appItem} key={appItem.id}></AppItem>
    ));

return (
      <React.Fragment>
        <div className="flex-container">
          <NavCategories
            categories={this.state.categories}
            onClick={this.handleClick}
            active={active}
          />
          <section className="apps-list">
            <header>
              <input type="text" placeholder="Search by App" />
            </header>
            <ul>{appList}</ul>
          </section>
        </div>
      </React.Fragment>
    );

this.state.appItems 是一个来自 json 文件的数组，这里是一个片段:

[ {
    "id": "12312",
    "name": "Test",
    "description": "test.",
    "categories": ["Voice", "Delivery", "Optimization"],
    "subscriptions": [
      {
        "name": "Trial",
        "price": 0
      },
      {
        "name": "Professional",
        "price": 3500
      }
    ]
  },]

Active 是一个字符串，用于管理另一个组件上的事件类项。

一切都正确呈现，但即使事件状态每次都在变化，它也永远不会被过滤。我尝试了多种方法，但是这个 Filter 方法让我很困惑，因为我想过滤另一个数组内的数组，并且想要过滤整个 AppItem 数组。

如果有人可以解释/给我一些提示，我会喜欢的。预先感谢:)

Answer 1

Array.filter() 返回一个新数组，其中包含过滤后的元素。因此，您的内部过滤器将始终返回一个至少包含零个元素的数组，该数组的计算结果为真值，而您的外部过滤器将仅包含原始数组中的每个元素。

只需将内部过滤器切换为 Array.includes() 即可，它将返回 true 或 false。

const categoryFilter = this.state.appItems.filter(item =>
  item.categories.includes(active)
);