我使用react构建了一个配方盒应用程序，它允许用户添加和删除recipes.Now，我的代码在代码笔上运行完美但是，当我在本地运行时，我得到了错误。我已经使用了代码笔的导出功能来下载项目并在本地运行它。如果有人可以指出我提交的错误，那将非常有帮助。 link to my pen
错误：
Uncaught TypeError: Cannot read property 'map' of null
at t.render (index.js:182)
at c._renderValidatedComponentWithoutOwnerOrContext (react.min.js:13)
at c._renderValidatedComponent (react.min.js:13)
at c.mountComponent (react.min.js:13)
at Object.mountComponent (react.min.js:14)
at mountChildren (react.min.js:14)
at m._createContentMarkup (react.min.js:13)
at mountComponent (react.min.js:13)
at Object.mountComponent (react.min.js:14)
at c.mountComponent (react.min.js:13)
这是我的代码
var Modal = ReactBootstrap.Modal;
var Accordion = ReactBootstrap.Accordion;
var Button = ReactBootstrap.Button;
var Popover = ReactBootstrap.Popover;
var Tooltip = ReactBootstrap.Tootip;
var FormGroup = ReactBootstrap.FormGroup;
var Input = ReactBootstrap.Input;
var Textarea = ReactBootstrap.TextArea;
var FormControl = ReactBootstrap.FormControl;
var ListGroup = ReactBootstrap.ListGroup,
ListGroupItem = ReactBootstrap.ListGroupItem;
var Panel = ReactBootstrap.Panel;
const AddModal = React.createClass({
getInitialState() {
return { showModal: false };
},
close() {
this.setState({ showModal: false });
},
open() {
this.setState({ showModal: true });
},
render() {
return (
<div>
<Button
bsStyle={this.props.bStyle}
bsSize={this.props.bSize}
onClick={this.open}
>
{this.props.name}
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>{this.props.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Input
id="name"
type="text"
label="Recipe"
placeholder="Recipe Name"
defaultValue={this.props.rvalue}
/>
<Input
id="ingri"
type="textarea"
label="Ingredients"
placeholder="Enter Ingredients,Separated,By Commas"
defaultValue={this.props.ivalue}
/>
</Modal.Body>
<Modal.Footer>
<Button id="blue" bsStyle="primary" data-key={this.props.keys} onClick={this.props.onClick}>
{this.props.title}
</Button>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
const RecipeBox = React.createClass({
getInitialState() {
// get locally stored recipe values
var local_recipes=JSON.parse(localStorage.getItem("recipes"))
// if no recipes set locally,use default values
if(local_recipes=="null" || local_recipes.length==0){
var default_recipes=[
{
name: "Pumpkin Pie",
ingredients: [
"Pumpkin Puree",
"Sweetened Condensed Milk",
"Eggs",
"Pumpkin Pie Spice",
"Pie Crust"
]
},
{
name: "Spaghetti",
ingredients: ["Noodles", "Tomato Sauce", "(Optional) Meatballs"]
},
{
name: "Onion Pie",
ingredients: ["Onion", "Pie Crust", "Sounds Yummy right?"]
}
]
localStorage.setItem("recipes",JSON.stringify(default_recipes) );
local_recipes=default_recipes
}
return {
recipes: local_recipes
};
},
addRecipe(x) {
const recipe = {};
recipe.name = $("#name").val();
recipe.ingredients = $("#ingri")
.val()
.split(",");
const newState = this.state.recipes;
newState.push(recipe);
// update local storage
localStorage.setItem("recipes",JSON.stringify(newState) );
// update state
this.setState({
recipes: newState
});
},
editRecipe(e){
const orecipe = {};
orecipe.name = $("#name").val();
orecipe.ingredients = $("#ingri")
.val()
.split(",");
const i=e.target.attributes.getNamedItem("data-key").value
const editedRecipe=this.state.recipes;
editedRecipe[i].name=orecipe.name
editedRecipe[i].ingredients=orecipe.ingredients
// update local storage with edited recipes
localStorage.setItem("recipes",JSON.stringify(editedRecipe) );
this.setState({
recipes:editedRecipe
})
},
delete(e){
const i = e.target.attributes.getNamedItem("data-key").value;
const deletedRecipe = this.state.recipes;
deletedRecipe.splice(i,1)
// update local storage with new recipe list after deleteion
localStorage.setItem("recipes",JSON.stringify(deletedRecipe) );
this.setState({
recipes: deletedRecipe
});
},
render() {
return (
<div>
<RecipeBars recipes={this.state.recipes} editRecipe={this.editRecipe} delete={this.delete} onClick={this.addRecipe} />
<AddModal
onClick={this.addRecipe}
title="Add a Recipe"
name="Add Recipe"
bSize="large"
bStyle="primary"
/>
</div>
);
}
});
const RecipeBars = React.createClass({
render() {
const recipes = this.props.recipes;
//error happens here,recipe is just a variable for map function,which shouldnt be giving error
const bars = recipes.map((recipe, i) => {
var igrid = recipe.ingredients.map((val, i) => {
return <ListGroupItem>{val}</ListGroupItem>;
});
var hstyle = { "text-align": "center" };
var bstyle = { "margin-right": "5px", float: "right", display: "inline" };
return (
<Panel eventKey={i} bsStyle="success" collapsible header={recipe.name}>
<h4 style={hstyle}>Ingredients</h4>
<ListGroup fill>{igrid}</ListGroup>
<Button data-key={i} style={bstyle} onClick={this.props.delete} bsSize="small" bsStyle="danger">
delete
</Button>
<AddModal
title="Edit Recipe"
onClick={this.props.editRecipe}
keys={i}
name="Edit"
bSize="small"
bStyle="info"
rvalue={recipe.name}
ivalue={recipe.ingredients.join(',')}
/>
</Panel>
);
});
return <div><Accordion onSelect={this.pclick}>{bars}< /Accordion></div>;
}
});
// ReactDOM.render(<AddModal title="Add a Recipe" name="Add Recipe" bSize="large" bStyle="primary"/>,document.getElementById('app'))
ReactDOM.render(<RecipeBox />, document.getElementById("app"));