如何按键值过滤汽车答案

【问题标题】：How to filter cars by key-value如何按键值过滤汽车
【发布时间】：2021-03-28 16:59:43
【问题描述】：

我实现了汽车拍卖，并且在目录组件中有一个汽车项目列表。我有指定汽车类型的按钮（suv、自行车、乘客..）

当我单击任何按钮时，我想重定向到具有根据 typeCar 的过滤汽车列表的目录。所以带有对象的数据在 App.js 中我在 App.js 中有一个目录组件目录组件有一个 CarItem 列表（CarItem 是 Catalog 中的一个子项，它接收道具并显示有关每辆车的信息（我使用地图来显示整个列表）。目录未过滤的问题。我在 App.js 中声明了 Route。

 <Route
        exact
        path="/catalog/typeCar"
        render={({ match }) => (
          <Catalog item={data.find((item) => String(item.typeCar) === String(match.params.typeCar))} />
        )}

按钮在另一个组件中，我为每个组件创建了链接：

      <Link  to={`/catalog/passanger`}><img src={img_4} className='white-fill mr-2' width='70px'/></Link> 
            
      <Link  to={`/catalog/bike`}> <img src={img_1} width='70px' className='white-fill mr-2' /></Link>

      <Link  to={`/catalog/suv`}> <img src={img_2} width='70px' className='white-fill' /></Link>

      <Link  to={`/catalog/bus`}> <img src={img_3} width='70px' className='white-fill ml-2' /></Link>

 </Col>

所以我点击一个按钮，看到 URL 已更改：http://localhost:3000/catalog/passanger ，但页面上没有信息。它没有重定向到带有 CarItems 列表的目录页面（组件）

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您使用URL params 错误地定义了您的路线。你需要使用:typeCar:

<Route
  exact
  path="/catalog/:typeCar" // Here
  render={({ match }) => (
    <Catalog
      item={data.find(
        (item) => String(item.typeCar) === String(match.params.typeCar)
      )}
    />
  )}
/>

此后，当您使用Link 或history.push 转到/catalog/bike 之类的路由时，match.params.typeCar（在路由的匹配对象中）的值将是bike。

【讨论】：

目录有子组件。数据是汽车对象的数组。一旦我单击 Suv img 或我正在寻找的任何其他类型的汽车，此数据就未定义。因此 url 已更改，但显示错误：TypeError: Cannot read property 'map' of undefined
我应该传递给 Catalog 然后传递给 CarItem 吗？
我通过 CarItem 组件中的数据 arr 映射来呈现 Catalog 中的汽车列表
codesandbox.io/s/ancient-tdd-2q9br?file=/src/App.js:1667-1675
谢谢你！一如既往地从第一次修复开始:)

【解决方案2】：

试试这个 Array.filter 方法：

<Route
  exact
  path="/catalog/typeCar"
  render={({ match }) => (
    <Catalog item={ data.filter((v) => String(v.typeCar) === String(match.params.typeCar)) } />
  )}/>

【讨论】：