は配列項目を削除できません。間違った項目は常に削除されます

Question

ボタンを押した後にドロップダウンメニューから項目を追加して作成したcomponentsArrayがあり、次にこの配列から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> 
    ); 
    } 
} 

Answer 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