在reactjs中正確過濾其他數組中的數組

Question

您好，我是第一次嘗試做出反應，但我的過濾器功能遇到了一些問題。 這是代碼：

所以這是我組件中的渲染方法：

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