目前我正在从事这个 FCC 项目: https://www.freecodecamp.com/challenges/build-a-recipe-box
到目前为止,我能够实现将新食谱添加到列表中。
但是,我很难实现如何编辑/删除每个食谱项目列表。现在,我只想关注如何删除每个项目。
我显示菜谱列表的方式是在 RecipeBox 容器中,我在其中使用映射函数从应用程序的状态迭代地渲染每个菜谱列表,以及渲染按钮“编辑”和“删除”。
但我似乎无法对其附加操作。 我收到以下错误:
Uncaught TypeError: Cannot read property 'props' of undefined
食谱盒容器:
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);
这看起来很微不足道,但我一直遇到障碍..
最佳答案
在构造函数中添加 this.renderRecipeList = this.renderRecipeList.bind(this)
。
关于javascript - React-Redux-从列表中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39195098/