Question

在游戏页面上，如果您正在搜索游戏，页面将重定向到搜索结果页面。我想在搜索结果页面上进行过滤。当我选中复选框时，数据将被过滤。

json 格式在这里

{"id": 26,
"title": "ebirth",
"sortName": "",
"isFullyOptimized": false,
"steamUrl": "",
"store": "",
"publisher": "",
"genres": ["Action", "Simulation"],
"status": "AVAILABLE"}

我有一个旁边的菜单组件，里面有复选框。我希望当我在这里选中复选框时，我会按流派和状态过滤到我的搜索结果。此处搜索结果返回的数据

{gameIds.length > 0 && (
    <div className="search-result__content">
      <div className="search-result__title">
        <h2>Search Results</h2>
        <span>{data.filter(({ id }) => gameIds.includes(id)).length} results</span>
      </div>
      <div className="game-card__content">
        {data
          .filter(({ id }) => gameIds.includes(id))
          .map((item, i) => {
            return (
              <a key={i} href={item.steamUrl} className={item.steamUrl && "has-url" ? "has-url" : ""}>{item.title}</a>
            );
          })}
      </div>
    </div>
  )}

我该怎么做？

这是代码

https://codesandbox.io/s/strange-bardeen-pf1k0

当复选框选中过滤数据时反应

0 个答案: