React-Redux- ein Element löschen aus der Liste

Question

Derzeit ich auf diesem FCC Projekt arbeite: https://www.freecodecamp.com/challenges/build-a-recipe-box

Ab jetzt konnte ich auf das Hinzufügen neuer Rezepte in die Liste implementieren.

Allerdings habe ich schwer zu implementieren, wie für jede Rezept-Artikel-Liste bearbeiten/löschen. Im Moment möchte ich mich nur auf das LÖSCHEN pro Element konzentrieren.

Die Art und Weise, wie ich die Rezeptliste anzeige, ist im RecipeBox-Container, wo ich die Map-Funktion verwende, um jedes von ihnen iterativ aus dem Status der App zu rendern, sowie die Schaltflächen BEARBEITEN und LÖSCHEN.

Aber ich kann nicht scheinen, eine Handlung daran anzuhängen. bekomme ich folgende Fehlermeldung:

Uncaught TypeError: Cannot read property 'props' of undefined 

RecipeBox Container:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap' 
import { bindActionCreators } from 'redux'; 
import { deleteRecipe } from '../actions/index'; 

class RecipeBox extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     open: false 
    }; 

    } 
    renderRecipeList(recipeItem,index){ 
    const recipe = recipeItem.recipe; 
    const ingredients = recipeItem.ingredients; 
    return(
     <div key={index}> 
     <Panel bsStyle="primary" collapsible header={<h3>{recipe}</h3>}> 
      <ListGroup > 
      <ListGroupItem header="Ingredients"></ListGroupItem> 
      {ingredients.map(function(ingredient,index){ 
       return <ListGroupItem key={index}>{ingredient}</ListGroupItem>; 
      })} 
      <ListGroupItem> 
       <Button 
       onClick={this.props.deleteRecipe(recipeItem)} 
       bsStyle="danger">Delete 
       </Button> 
       <Button 
       onClick={() => console.log('EDIT!')} 
       bsStyle="info">Edit 
       </Button> 
      </ListGroupItem> 
      </ListGroup> 
     </Panel> 
     </div> 
    ) 
    } 
    render(){ 
    return(
     <div className="container"> 
     <div className='panel-group'> 
      {this.props.addRecipe.map(this.renderRecipeList)} 
     </div> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    addRecipe : state.addRecipe 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({deleteRecipe}, dispatch) 
} 

export default connect(mapStateToProps,mapDispatchToProps)(RecipeBox); 

Dies scheint sehr trivial, aber ich halte eine Straßensperre schlagen ..

Answer 1

this.renderRecipeList = this.renderRecipeList.bind(this) im Konstruktor hinzufügen.

Answer 2

render(){ 
return(
    <div className="container"> 
    <div className='panel-group'> 
     {this.props.addRecipe.map(this.renderRecipeList.bind(this))} 
    </div> 
    </div> 
) 
}