試圖從索引狀態數組拼接，但結果從第一個索引拼接到最後

Question

我想拼接單擊時的特定對象，例如我的刪除功能。我已經爲i指定了索引值，並且創建了一個我的狀態的複製數組，並嘗試拼接它，例如arr.splice（i，1），但它僅從第一個到最後一個拼接，例如，如果單擊最後一個對象的刪除第一個對象被刪除等等。我不明白爲什麼我的索引使用不正常。

var Recipes = React.createClass({ 
    // hook up data model 
    getInitialState: function() { 
    return { 
     recipeList: [ 
      {recipe: "Malek's Protein Shake", ingredients: ['1 Glass of Whole Milk', '6 tablespoons of Peanut Butter', '1 scoop of Whey', '2 Bananas', '1 scoop of Vanilla Ice Cream']}, 
      {recipe: 'Pumpkin Pie', ingredients: ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']}, 
      {recipe: 'Spaghetti with fried eggs', ingredients: ['Noodles', 'Tomato Sauce', 'Meatballs', '4 eggs', 'Ground black pepper']} 
     ] 
    } 
    }, 

    ingredientList: function(ingredients) { 
    return ingredients.map((ingredient, i) => { 
    return (<li key={i} index={i} className="list-group-item">{ingredient}</li>) 
    }) 
    }, 

    eachRecipe: function(item, i) { 
    return (
     <div key={i} index={i} className="panel panel-default"> 
      <div className="panel-heading"><h3 className="panel-title">{item.recipe}</h3></div> 
      <div className="panel-body"> 
      <ul className="list-group"> 
       {this.ingredientList(item.ingredients)} 
      </ul> 
      <button type="button" className="btn-sm btn-info" data-toggle="modal" data-target="#myModal">Edit</button> 
      <button onClick={this.remove} type="button" className="btn-sm btn-danger">Remove</button> 
      </div> 
     </div> 
    ) 
    }, 

    add: function(text) { 
    var name = this.refs.userVal.value; 
    var items = this.refs.newIngredients.value.split(","); 
    this.setState({recipeList: [...this.state.recipeList, { recipe: name, ingredients: items }]}) 
    }, 

    remove: function(i) { 
    var arr = this.state.recipeList.slice(); //copy array 
    arr.splice(i, 1); //remove element 
    this.setState({recipeList: arr}); //update state 
    }, 

    render: function() { 
     return (
     <div> 
     <div> 
     <button type="button" className="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Add Recipe</button> 
     <div id="myModal" className="modal fade" role="dialog"> 
      <div className="modal-dialog"> 

      <div className="modal-content"> 
      <div className="modal-header"> 
     <button type="button" className="close" data-dismiss="modal">&times;</button> 
      <h4 className="modal-title">Add a new recipe</h4> 
      </div> 
      <div className="modal-body"> 
      <form role="form"> 
        <div className="form-group"> 
        <label forName="recipeItems">Recipe</label> 
         <input ref="userVal" type="recipe" className="form-control" 
         id="name" placeholder="Enter Recipe Name"/> 
        </div> 
        <div className="form-group"> 
        <label for="ingredientItems">Ingredients</label> 
         <input ref="newIngredients" type="ingredients" className="form-control" 
          id="ingredients" placeholder="Enter Ingredients separated by commas"/> 
        </div> 
        <button onClick={this.add} type="button" className="btn btn-default" data-dismiss="modal">Submit</button> 
       </form> 
      </div> 
      <div className="modal-footer"> 
     <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div className="panelArea"> 
     { 
      this.state.recipeList.map(this.eachRecipe) 
     } 
    </div> 
     </div> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Recipes />, 
    document.getElementById('master') 
) 

Answer 1

您可以嘗試在onClick事件處理程序：

<button onClick={this.remove.bind(this, i)} type="button" className="btn-sm btn-danger">Remove</button>