尝试从状态数组从索引进行拼接，但最终从第一个索引拼接到最后一个索引

我试图在单击时拼接特定对象，例如我的删除功能。我已经给index分配了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')
)