Javascript 当用户单击React Webpack中的筛选项时，如何保持初始呈现列表的相同索引？

我已经为我的目录添加了一个过滤器（

filteredCat

），它在视觉上可以正常工作

问题在于，尽管项目已过滤，但记录的索引并不反映新过滤列表的索引。它返回最初呈现的列表的索引

例如，如果列表被筛选为索引最初为10的单个项。它仍然记录索引0

export default class Catalogue extends React.Component{

  productClickHandler(index){
    console.log(index);
  };

  render(){

let filteredCat = this.props.DVDLibrary.filter(
  (dvds) => {
    return(
      dvds.title.toLowerCase().indexOf(this.props.searchFilterInput) !== -1
    )
  }
);

var catologueList = filteredCat.map((dvds,index) => {
    return(
      <li key={index} onClick={this.productClickHandler.bind(this,index)}>
        <div className="inner">
          <h2>{dvds.title}</h2>
          <img src={dvds.image}/>
          <p><strong>Rating</strong>: {dvds.rating}</p>
          <p><strong>Price</strong>: {dvds.price}</p>
          <p><strong>Stock</strong>: {dvds.stock}</p>
        </div>
      </li>
    )
});

return(
  <div>
    <ul>
      {catologueList}
    </ul>
  </div>
)
  }

}

导出默认类目录扩展React.Component{
productClickHandler（索引）{
控制台日志（索引）；
};
render（）{
让filteredCat=this.props.DVDLibrary.filter(
（DVD）=>{
返回(
dvds.title.toLowerCase（）.indexOf（this.props.searchFilterInput）！=-1
)
}
);
var catologuelest=filteredCat.map（（DVD，索引）=>{
返回(

{dvds.title}
评级：{dvds.Rating}

价格：{dvds.Price}

股票：{dvds.Stock}


)
});
返回(

{catologuelest}

)
}
}

---

当用户单击筛选项目时，如何保持初始呈现列表的相同索引？

引用filteredCat变量而不是catologueList索引有效