Uncaught TypeError：無法讀取未定義的屬性'propTypes'反應

Question

我在Codepen中執行此示例。 https://codepen.io/mpance/pen/bpjmdY

Uncaught TypeError: Cannot read property 'propTypes' of undefined: VM198513 react-bootstrap.min.js:13

而且，不知道它與綁定警告意味着：

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See MainLayout, See RecipesContainer

此代碼工作正常，直到我試圖實現地圖功能的配方成分遍歷在配方屬性州。然後，所有事情都進行了一次潛水！你看到我錯過的代碼有什麼問題嗎？

var MainLayout = React.createClass({ 
    getInitialState: function() { 
    return { recipes: [{recipe: "Pumpkin Pie", ingredients: ["Pumpkin Puree", 
         "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", 
         "Pie Crust"]}], 
      recipeInput: '', 
      ingredientsInput: '', 
      } 
    }, 

    addRecipe: function() { 
    var stateCopy = Object.assign({}, this.state); 

    var recipe = stateCopy.recipes.find(function(elem, idx){ 
     return elem.recipe === this.state.recipeInput; 
    }.bind(this)) 

    if(recipe === undefined) { 
     stateCopy.recipes.push({ recipe: this.state.recipeInput, ingredients: this.state.ingredientsInput }) 
     this.setState(stateCopy) 
     console.log(this.state); 
    } else { 
     recipe.ingredients = this.state.ingredientsInput.split(', '); 
     this.setState(stateCopy); 
    } 

     stateCopy.recipeInput = ''; 
     stateCopy.ingredientsInput = ''; 

    }, 

    editRecipe: function(title) { 
    window.scrollTo(0,0); 
    document.getElementById('text-area').focus() 

    var recipe = this.state.recipes.find(function(elem, idx){ 
     return elem.recipe === title; 
    }.bind(this)) 

    this.setState({ recipeInput: recipe.recipe, ingredientsInput: recipe.ingredients.join(', ')}) 

    }, 

    handleRecipe: function(event) { 
    this.setState({recipeInput: event.target.value}); 
    }, 

    handleIngredients: function(event) { 
    this.setState({ingredientsInput: event.target.value}); 
    }, 

    render: function() { 
    return (
     <div className="MainLayout"> 
     <br /> 
     <form id="form"> 
      <h4>Recipe</h4> 
      <input id="recipe-input" type="text" value={this.state.recipeInput} onChange = {this.handleRecipe} placeholder="Apple Pie" /> 
      <br /> 
      <h4>Ingredients</h4>1 
      <textarea id="text-area" value={this.state.ingredientsInput} rows="5" cols="50" type="text" onChange = {this.handleIngredients} placeholder="Sugar, milk, etc."> 
      </textarea> 
      <br/> 
      <button className="btn btn-primary" onClick = {this.addRecipe.bind(this)} bsStyle="primary">Add recipe</button> 
     </form> 
     {this.state.recipeInput} 
     <br/> 
     <br/> 
     <RecipesContainer editRecipe={this.editRecipe} recipes={this.state.recipes}/>  
     </div> 
    ) 
    } 
}) 

var RecipesContainer = React.createClass({ 
    createPanels: function() { 
    return 1 
    }, 

    editRecipe: function(title) { 
    this.props.editRecipe(title); 

    }, 

    render: function() { 
     return (<Recipes editRecipe={this.editRecipe.bind(this)} recipes={this.props.recipes}/>) 
    } 
}) 

var Recipes = React.createClass({ 
    render: function() { 
    var panels = this.props.recipes.map(function(current, idx) { 
     (<div> 
      <div className="panel panel-default"> 
      <div className="panel-heading"> 
       <h3 className="panel-title">{current.recipe}</h3> 
      </div> 
      <div className="panel-body"> 
       <p>{current.ingredients.join(', ')}</p> 
      </div> 
      <button type="button" className="btn btn-primary">Delete</button> 
      <button type="button" onClick={this.props.editRecipe.bind(null, current.recipe)} className="btn btn-primary">Edit</button>{' '} 
      </div> 
     </div>) 
    }.bind(this)) 
    return panels 
    } 

}) 

ReactDOM.render(<MainLayout/>, document.getElementById('container')) 

Answer 1

請在RecipesContainer組件

editRecipe={this.editRecipe.bind(this)} to editRecipe={this.editRecipe}. 

與之相似的MainLayout變化

onClick = {this.addRecipe.bind(this)} to onClick = {this.addRecipe} 

無需綁定下面這樣的變化，在此做出反應，自動通過。 相應修改您的筆： https://codepen.io/Debabrata89/pen/NNLxQv?editors=1111