无法删除数组项，错误的项总是被删除

Posted 2023-02-22

【中文标题】无法删除数组项，错误的项总是被删除

【英文标题】：cannot delete array item, the wrong item always gets deleted

【发布时间】：2017-02-17 04:00:11

【问题描述】：

我有一个成分数组，它是通过在按下按钮后从下拉菜单中添加项目来构造的，然后当我尝试使用 deleteIngredient 通过按下该项目来删除该数组中的项目时，它的行为方式很奇怪，并且索引总是返回 -1

import React from 'react';
import  Link  from 'react-router';

export default class Order extends React.Component 

constructor() 
    super()
    this.state = 
      selectedCircle:,
      cheeseAdd: false,
      ingredient:'',
      ingredientsArray: []
    ;
  

  onSelectIngredient(e)

    this.setState(
      ingredient: e.target.value
    )
  

addIngredient()

    this.state.ingredientsArray.push(this.state.ingredient+" ");
    this.forceUpdate();
  

  deleteIngredient(e) 

  var array = this.state.ingredientsArray;
  var index = array.indexOf(e.target.value);
  console.log(e.target.value);
  array.splice(index, 1);
  this.setState(ingredientsArray: array );


  onAddCheese()

    let add = !this.state.cheeseAdd;
    this.setState(cheeseAdd : add);
  

  saveAndContinue(e)
    e.preventDefault();
    var pizzaObject = JSON.stringify(this.state.selectedCircle);
    var pizza = pizzaObject.substring(2,4);
    if(this.state.cheeseAdd == true)
    
        var cheeseChoice = "Yes";
    
    else
        var cheeseChoice = "No"
    
    var data = 
       pizzaSize   : pizza,
       cheese      : cheeseChoice,
       ingredients : [this.state.ingredientsArray]
    

    this.props.saveValues(data);
    this.props.changeArrowBlack_1();
    this.props.nextCase();
  

 toggleChoice(name, event) 
     let selected = this.state.selectedCircle;
     selected = ;
     selected[name] = this.state.selectedCircle[name] == "active-circle" ?        "" : "active-circle";
     this.setState(selectedCircle: selected);
  



  render() 
    const  selected  = this.state;
    const selectedCircle = selected ? "active-circle":"";
    return (
        <div class="container card-layout" id="order-layout">
            <div class="row">

                    <div class="card-panel white">
                      <div class="center">
                        <h5 class="bold">Your Order</h5>
                        <p class="margin-top-30 bold">Choose Pizza size in cm</p>
                        <ul class="margin-top-30">
                            <li ><div onClick=this.toggleChoice.bind(this, "20") class="circle-20 hovered-circle " + this.state.selectedCircle["20"]>20</div></li>
                            <li ><div onClick=this.toggleChoice.bind(this, "30") class="circle-30 hovered-circle " + this.state.selectedCircle["30"]>30</div></li>
                            <li ><div onClick=this.toggleChoice.bind(this, "40") class="circle-40 hovered-circle " + this.state.selectedCircle["40"]>40</div></li>
                          </ul> 
                           <p class="bold margin-top-20">Ingredients:</p>
                        <div class="row">
                            <select class="browser-default col s5 offset-s3" defaultValue="0" onChange=this.onSelectIngredient.bind(this)>
                              <option value="0" disabled>Choose Ingredients</option>
                              <option value="Tomato sauce">Tomato sauce</option>
                              <option value="Mozarella">Mozarella</option>
                              <option value="Mushrooms">Mushrooms</option>
                      <option value="Cheese">Cheese</option>
                      <option value="Salami">Salami</option>
                            </select>
                            <i onClick=this.addIngredient.bind(this) class="material-icons medium col s1 add-ingredient">add_box</i>
                          </div>
                  <div class="row ingredients-row">
                    this.state.ingredientsArray.map((item, index) => <span class="col s3" key=index >item<img src="/img/icons/cancel_small.png" onClick=this.deleteIngredient.bind(this) /></span> )
                  </div>  
                            <p class="bold margin-top-30">Cheese rand ?</p>
                            <div class="switch margin-top-20">
                                <label>no
                                <input ref="cheeseRand" type="checkbox" checked=this.state.cheeseAdd onChange=this.onAddCheese.bind(this)  />
                                <span class="lever"></span>
                                yes</label>
                            </div>
                            <div class="divider margin-top-30"></div>
                            <button onClick=this.saveAndContinue.bind(this) class="waves-effect waves-light btn red-button margin-top-20"><i class="material-icons right">arrow_forward</i>Next</button>
                     </div>
                   </div>
            </div>
        </div>
    );
  

【问题讨论】：

你能展示一个示例数组吗？

@Rajesh 示例数组将是例如成分数组 [“蘑菇”、“西红柿”、“奶酪”]，我从下拉列表中获取值，如代码所示，并将它们推送到数组并且每个数组项都作为一个跨度填充到 dom 中，我在该跨度上有一个 onclick 函数，应该删除该数组项，但它不能正常工作

你试过.trim()吗？ e.target.value.trim()?

@Rajesh 是的，如果你使用修剪，那么它会完全停止工作，不修剪它会删除，但错误的项目和索引总是返回 -1

请提供minimal reproducible example。

【参考方案1】：

您没有将项目的索引传递给deleteIngredient()。在您的map 方法中，您可以这样做：

onClick=this.deleteIngredient.bind(this, index)

然后在deleteIngredient()

你可以这样访问它：

deleteIngredient(index) 
   console.log(index)
   ...
 

另外，您更新的状态不正确，这里有一个快速修复：

  deleteIngredient(index) 
    console.log(index);
    var array = this.state.ingredientsArray.slice();
    array.splice(index, 1);
    this.setState(ingredientsArray: array );
  

或者，使用过滤方法：

  deleteIngredient(index) 
    this.setState(
      ingredientsArray: this.state.ingredientsArray.filter((item, i) => i !== index)
    );
  

或者，使用 ES6 扩展运算符：

 deleteIngredient(index) 
    this.setState(
      ingredientsArray: [
        ...this.state.ingredientsArray.slice(0, index),
        ...this.state.ingredientsArray.slice(index + 1)
      ]
    );
  

这是一个演示：http://codepen.io/PiotrBerebecki/pen/bwLyOJ

【讨论】：

完美运行，非常感谢，我还是个javascript和react新手，感谢分享，让我变得更好！

很高兴能帮上忙，我还添加了从数组中删除项目的扩展运算符方式。

您不应该在 JSX 中使用 .bind 语法，而是创建一个组件，在其中传递 deleteIngredient 回调和索引，然后在该组件中调用它。

很棒的提示@kudlajz。以下是我们如何做到这一点的示例：***.com/a/38908620/4186037