codepenからの反応プロジェクトがローカルで実行されない

Question

私はrecipesを使用してレシピボックスのアプリケーションを作成しました。レシピを追加したり削除したりすることができます。私はコードペンのエクスポート機能を使ってプロジェクトをダウンロードし、それをローカルに実行しました。もし誰かが私がコミットしているエラーを指摘できれば、それは本当に役に立つでしょう。 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")); 

Answer 1

で、私はここで、適切な方法でローカルストレージを設定していませんでしたが、私は修正する方法でありますそれで link to working pen

// get locally stored recipe values 
    var local_recipes=localStorage.getItem("recipes"); 
//  check if recipes is defined in local storage 
    if(typeof local_recipes !== 'undefined' && local_recipes !== null){ 
//  if recipe is stored in local storage 
    var local_recipes=JSON.parse(localStorage.getItem("recipes")) 

    }else{ 

//  if recipe is not stored in local storage 
     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 

    }