Question

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

未捕获的TypeError：无法读取未定义的属性'propTypes'： VM198513 react-bootstrap.min.js：13

另外，不确定绑定警告意味着什么：

警告：bind（）：您正在将组件方法绑定到组件。 React会以高性能的方式为您自动执行此操作，因此你可以安全地删除这个电话。请参阅MainLayout，参见RecipesContainer

这段代码工作正常，直到我尝试在Recipes组件中实现map函数来迭代状态中的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'))

Answer 1

在RecipesContainer组件中进行以下更改

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

在MainLayout更改中类似

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

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

未捕获的TypeError：无法读取未定义的React的属性'propTypes'

1 个答案: