未捕获的类型错误：无法读取未定义 React 的属性“propTypes”答案

【问题标题】：Uncaught TypeError: Cannot read property 'propTypes' of undefined React未捕获的类型错误：无法读取未定义 React 的属性“propTypes”
【发布时间】：2016-04-25 12:57:02
【问题描述】：

我在 Codepen 中做这个例子。 https://codepen.io/mpance/pen/bpjmdY

未捕获的类型错误：无法读取未定义的属性“propTypes”： VM198513 react-bootstrap.min.js:13

另外，不确定绑定警告的含义：

警告：bind()：您正在将组件方法绑定到组件。 React 以一种高性能的方式自动为你做这件事，所以您可以安全地删除此呼叫。见 MainLayout，见 RecipesContainer

在我尝试在 Recipes 组件中实现 map 函数以迭代 state 中的 recipes 属性之前，这段代码运行良好。然后一切都急转直下！您发现我遗漏的这段代码有什么问题吗？

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

【问题讨论】：

标签： reactjs

【解决方案1】：

在RecipesContainer 组件中进行以下更改

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

MainLayout 变化类似

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

不需要绑定 this ，这是在 React 中自动传递的。相应地修改了你的笔： https://codepen.io/Debabrata89/pen/NNLxQv?editors=1111

【讨论】：