間違ったインデックスが割り当てられるのはなぜですか？

Question

CODE：

handleDeleteClick: function(index) { 
     var newRecipesArray = this.state.recipesArray; 
     newRecipesArray.splice(index-1,1); 
     this.setState({ 
      recipesArray: newRecipesArray 
     }); 
    }, 
    render: function() { 
     var i = 0; 
     var that = this; 

     var recipes = this.state.recipesArray.map(function(item) { 
      i++ 
      return (
       <div key={"div"+i} className="table"> 
        <Recipe key={i} name={item.name} ingredients={item.ingredients} /> 
        <button key ={"edit"+i} onClick={() => { that.handleEditClick(i)}} className="btn edit btn-primary">Edit</button> 
        <button key ={"delete"+i} onClick={() => { that.handleDeleteClick(i)}} className="btn delete btn-danger">Delete</button> 
       </div> 
      ); 
     }); 

     return (
      <div> 
       <h1>React.js Recipe Box</h1> 
       <button className="btn btn-primary" onClick={this.handleClick}>Add Recipe</button> 
       <table> 
        <tbody> 
         <tr> 
          <th>RECIPES</th> 
         </tr> 
        </tbody> 
       </table> 
       {recipes} 
       { this.state.adding ? <AddRecipe handleClose={this.handleClose} handleAdd={this.handleAdd} /> : null } 
       { this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose} handleEdit={this.handleEdit}/> : null } 
      </div> 
     ); 
    }, 
}); 

---

SITUATION：

私は、削除をクリックして、それを削除することを具体的にリンクされなければならないの代わりに削除された最後の要素は常にですボタン。

間違いはどこにありますか？どのように修正しますか？

Answer 1

mapは2番目のパラメータとしてindexを指定するので、別のインデックス変数は必要ありません。また、すべての要素にキーは必要ありませんが、親要素のみ

handleDeleteClick: function(index) { 
     var newRecipesArray = this.state.recipesArray; 
     newRecipesArray.splice(index,1); 
     this.setState({ 
      recipesArray: newRecipesArray 
     }); 
    }, 
    render: function() { 

     var that = this; 

     var recipes = this.state.recipesArray.map(function(item, i) { 

      return (
       <div key={"div"+i} className="table"> 
        <Recipe name={item.name} ingredients={item.ingredients} /> 
        <button onClick={() => { that.handleEditClick(i)}} className="btn edit btn-primary">Edit</button> 
        <button onClick={() => { that.handleDeleteClick(i)}} className="btn delete btn-danger">Delete</button> 
       </div> 
      ); 
     });