잘못된 색인이 지정된 이유는 무엇입니까?

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> 
     ); 
    }, 
}); 

---

상황 :

내가 삭제를 클릭, 그것은 삭제 특정에 연결해야 하나 대신 삭제 마지막 요소는 항상 단추.

어디에서 실수가 있었으며 어떻게 수정합니까?

Answer 1

Map은 두 번째 매개 변수로 인덱스를 제공하므로 별도의 인덱스 변수가 필요하지 않습니다. 또한 모든 요소에 대해 키가 필요하지 않고 부모 요소 만 필요합니다.

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> 
      ); 
     });