Javascript 如何在搜索中获取索引

我有一个应用程序要在可用优惠券和不可用优惠券之间进行划分，当用户单击可用优惠券时，优惠券将转到不可用部分（反之亦然），一切正常。但是，如果我在搜索框中搜索优惠券，就会出现错误，结果是我无法获得搜索优惠券的初始索引（它将始终更改为索引0）

例如，

优惠券B

应该有索引1，但当我在搜索框中键入

优惠券B

时，索引将变为0，这打破了我的

changedHandler

逻辑。我怎样才能解决这个问题

您可以通过此链接查看我的应用程序的运行情况

MainContainer.Jsx

state = {
    availableCoupon: ['Coupon A', 'Coupon B', 'Coupon C', 'Coupon D'],
    nonAvalailable: ['filter0', 'filter1', 'filter2', 'filter3'],
    text: ''
  };

  searchHandler = text => {
    this.setState({ text });
  };

  changedHandler = i => {
    console.log(i);
    const r = window.confirm('Use Coupon?');
    if (r) {
      let newItems = [...this.state.nonAvalailable];
      let updatedItems = this.state.availableCoupon.splice(i, 1);
      newItems.push(...updatedItems);
      this.setState({
        nonAvalailable: newItems
      });
      console.log('THIS IS NEW ITEMS ' + updatedItems);
    }
    return false;
  };
  render(){
     return(
      <SearchBox
        searchTerm={this.state.text}
        filteredList={this.state.availableCoupon}
        searchHandler={this.searchHandler}
      />
      <FilteredItem
        changed={this.changedHandler}
        searchTerm={this.state.text}
        availableCoupon={this.state.availableCoupon}
      /> 
    )      
 }

filteredItem.jsx

<Input
   onChange={e => this.props.searchHandler(e.target.value)}
   value={this.props.text}
   type="text"
   name="coupone"
   id="exampleCoupon"
   placeholder="Coupon Goes Here"
/>

{this.props.availableCoupon
   .filter(
      item =>
         `${item}`
         .toUpperCase()
         .indexOf(this.props.searchTerm.toUpperCase()) >= 0
   )
   .map((item, index) => {
      return (
          <Col key={index} className="mt-3" md="2" lg="2" sm="3" xs="4">
             <Card onClick={() => this.props.changed(index)}>
                <CardBody>
                   <CardTitle>{item}</CardTitle>
                </CardBody>
              </Card>
           </Col>
       );
   })}

{this.props.availablecoon
.过滤器(
项目=>
`${item}`
.toUpperCase（）
.indexOf（this.props.searchTerm.toUpperCase（））>=0
)
.map（（项目、索引）=>{
返回(
this.props.changed（index）}>
{item}
);
})}

如您所见，使用数组索引作为每个项目的键是不可靠的，因为项目的键将在其在数组中的位置发生变化时发生变化，因此使键几乎毫无用处

相反，您应该做的是使您的项成为具有与每个项关联的唯一ID的对象，以便每个项的ID始终与您正在使用的项匹配。无论您在哪里使用

索引

，请改用

item.id

在以下情况下可用：[
{name:'优惠券A'，id:0}，
{name:'优惠券B'，id:1}，
{名称：'优惠券C'，id:2}，
{name:'优惠券D'，id:3}，
],
不可估价：[
{name:'filter0'，id:4}，
{name:'filter1'，id:5}，
{name:'filter2'，id:6}，
{name:'filter3'，id:7}，
],

---

确保相应地更新代码的其余部分，例如，通过执行

，按

项进行筛选。名称
而不是
项
，等等。
如您所见，使用数组索引作为每个项的键是不可靠的，因为只要该项在数组中的位置发生变化，该项的键就会发生变化，因此，使得密钥几乎毫无用处

相反，您应该做的是使您的项成为具有与每个项关联的唯一ID的对象，以便每个项的ID始终与您正在使用的项匹配。无论您在哪里使用
索引
，请改用
item.id

在以下情况下可用：[
{name:'优惠券A'，id:0}，
{name:'优惠券B'，id:1}，
{名称：'优惠券C'，id:2}，
{name:'优惠券D'，id:3}，
],
不可估价：[
{name:'filter0'，id:4}，
{name:'filter1'，id:5}，
{name:'filter2'，id:6}，
{name:'filter3'，id:7}，
],

确保相应地更新代码的其余部分，例如，通过执行
，按
项进行筛选。名称
而不是
项
，等等。
因此，它不起作用的原因是，您每次实际搜索时所依赖的
键
属性都会更改。因此，您有两种选择：

1-使用对象而不是字符串，这有点像真实世界。对象具有唯一且不应更改的属性，例如id，或者可能是其他属性。例如
[{name:'ABCDE'，id:1}，{name:'PQRST'，id:2}]
。因此，您可以在它们的基础上构建过滤、删除等功能

2-暂时不要使用字符串，而是依赖于初始数组中每个元素的索引。
我的意思是：

{this.props.availableCoupon
 .filter(
    item =>
       `${item}`
       .toUpperCase()
       .indexOf(this.props.searchTerm.toUpperCase()) >= 0
 )
 .map((item, index) => {
    return (
        let ind = this.props.availableCoupon.indexOf(item);
        <Col key={index} className="mt-3" md="2" lg="2" sm="3" xs="4">
           <Card onClick={() => this.props.changed(ind)}>
              <CardBody>
                 <CardTitle>{item}</CardTitle>
              </CardBody>
            </Card>
         </Col>
     );
 })}

{this.props.availablecoon
.过滤器(
项目=>
`${item}`
.toUpperCase（）
.indexOf（this.props.searchTerm.toUpperCase（））>=0
)
.map（（项目、索引）=>{
返回(
设ind=this.props.availablecoon.indexOf（item）；
this.props.changed（ind）}>
{item}
);
})}

第二个是一个真正的快速修复，但在现实世界中，你通常不会这样做。只要在现实世界中每个对象都有稳定的
id
，您可能就不需要它了。
所以，它不起作用的原因是，您每次实际搜索时所依赖的
键属性都会发生变化。因此，您有两种选择：

1-使用对象而不是字符串，这有点像真实世界。对象具有唯一且不应更改的属性，例如id，或者可能是其他属性。例如
[{name:'ABCDE'，id:1}，{name:'PQRST'，id:2}]
。因此，您可以在它们的基础上构建过滤、删除等功能

2-暂时不要使用字符串，而是依赖于初始数组中每个元素的索引。
我的意思是：

{this.props.availableCoupon
 .filter(
    item =>
       `${item}`
       .toUpperCase()
       .indexOf(this.props.searchTerm.toUpperCase()) >= 0
 )
 .map((item, index) => {
    return (
        let ind = this.props.availableCoupon.indexOf(item);
        <Col key={index} className="mt-3" md="2" lg="2" sm="3" xs="4">
           <Card onClick={() => this.props.changed(ind)}>
              <CardBody>
                 <CardTitle>{item}</CardTitle>
              </CardBody>
            </Card>
         </Col>
     );
 })}

{this.props.availablecoon
.过滤器(
项目=>
`${item}`
.toUpperCase（）
.indexOf（this.props.searchTerm.toUpperCase（））>=0
)
.map（（项目、索引）=>{
返回(
设ind=this.props.availablecoon.indexOf（item）；
this.props.changed（ind）}>
{item}
);
})}

第二个是一个真正的快速修复，但在现实世界中，你通常不会这样做。只要在现实世界中每个对象都有稳定的
id
，你可能就不需要它了。
好吧，我第一次输入注释时就错了。那么，您是在谈论据说正在阻止组件的
键
属性吗？好的，当我键入第一条注释时，我错了。那么，您是在谈论据称正在制动组件的
键
属性吗？使用第二个选项是否有任何不利之处？就像性能问题一样？若你们有很大的数组，性能可能会有点问题，因为字符串比较是b