Javascript 如何按关键字值筛选汽车

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

当我点击任何一个按钮时，我想重定向到带有相应类型汽车的过滤列表的目录。 因此，带有对象的数据位于App.js中 我在App.js中有一个目录组件 catalog组件有一个CarItem列表（CarItem是catalog中的一个子项，它接收道具并显示每辆车的信息（我使用地图显示整个列表）。 目录未被筛选的问题。 我在App.js中声明了路线

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

(
字符串（item.typeCar）==字符串（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

---

，但页面上没有任何信息。它没有重定向到目录页面（组件），其中包含一个caritem列表

您使用错误定义的路由。您需要使用

：typeCar

：

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

(
字符串（item.typeCar）==字符串（match.params.typeCar）
)}
/>
)}
/>

---

之后，当您使用

链接
或
历史记录转到类似
/catalog/bike
的路线时。按
，路线的匹配对象中的值将为
bike
尝试此数组。筛选方法：

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

(
字符串（v.typeCar）==字符串（match.params.typeCar））}/>
)}/>
目录包含子组件。数据是汽车对象的数组。一旦我点击Suv img或我正在寻找的任何其他类型的汽车，这些数据就没有定义。因此url已更改，但它显示错误：TypeError:无法读取未定义的属性“map”是否应传递到Catalog，然后传递到CarItem？我通过CarItem组件中的数据arr进行映射，以呈现Catalog中的汽车列表谢谢！！从第一次修复开始始终有效：）