Javascript React Redux-从列表中删除项目

目前我正在从事这个FCC项目：

到现在为止，我已经能够在列表中添加新的食谱

然而，我很难实现如何编辑/删除每个配方项目列表。现在，我只想关注如何删除每个项目

我显示配方列表的方式是在RecipeBox容器中，在该容器中，我使用map函数从应用程序的状态迭代呈现每个配方列表，以及呈现按钮EDIT和DELETE

但我似乎无法对它采取行动。 我得到以下错误：

Uncaught TypeError: Cannot read property 'props' of undefined

RecipeBox容器：

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'react bootstrap'导入{ListGroup，ListGroupItem，Panel，Button，Modals}
从“redux”导入{bindActionCreators}；
从“../actions/index”导入{deleteRecipe}；
类RecipeBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开放：假
};
}
renderRecipeList（recipeItem，索引）{
const recipe=recipeItem.recipe；
常量成分=混合成分；
返回(
{components.map（函数（成分，索引）{
返回{成分}；
})}
删除
console.log（'EDIT！'）}
bsStyle=“info”>编辑
)
}
render（）{
返回(
{this.props.addRecipe.map（this.renderRecipeList）}
)
}
}
函数MapStateTops（状态）{
返回{
addRecipe:state.addRecipe
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{deleteRecipe}，dispatch）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（RecipeBox）；

---

这看起来很琐碎，但我一直遇到一个障碍。

在构造函数中添加

This.renderRecipeList=This.renderRecipeList.bind（This）

。

在构造函数中添加

This.renderRecipeList=This.renderRecipeList.bind（This）

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

render（）{
返回(
{this.props.addRecipe.map（this.renderRecipeList.bind（this））}
)
}

你能给我们看一下你的减速机代码，让我们检查一下吗？你能给我们看一下你的减速机代码，让我们检查一下吗？哎呀，忘了绑定它了。非常感谢！哎呀，忘了装订了……多谢了！