反应：未捕获的类型错误：无法读取未定义的属性“集”

Question

var React = require('react');
var Recipe = require('../models/recipes.js').Recipe;
var IngredientCollection =require('../models/recipes.js').IngredientCollection;


var IngredientForm = React.createClass({
getInitialState: function(){
var ingredients = new IngredientCollection();
ingredients.add([{}]);

return{
  ingredients: ingredients,
  recipe: new Recipe()
};
},
handleAmount: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('amount', e.target.value);
},
handleUnits: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('units', e.target.value);
},
handleName: function(e){
var ingredients = this.state.ingredients;
this.props.ingredient.set('name', e.target.value);
},
render: function(){
var ingredient = this.props.ingredient;

var count = this.props.counter + 1;
return (
  <div className="ingredients row">
    <h1 className="ingr-heading">Ingredients</h1>
   <div  className="ingredient-wrapper col-xs-10 col-xs-offset-1">
       <input onChange={this.handleAmount} ref={"amount"}  type="text"  className="amount form-control" id="amount" placeholder="Amount"/>
       <select onChange={this.handleUnits} ref={"units"} className="unit form-control" defaultValue="A">
         <option disabled value="A">unit</option>
         <option value="B">tsp.</option>
         <option value="C">tbsp.</option>
         <option value="D">fl oz(s)</option>
         <option value="E">cup(s)</option>
         <option value="F">pt(s)</option>
         <option value="G">qt(s)</option>
         <option value="H">gal(s)</option>
         <option value="I">oz(s)</option>
         <option value="J">lb(s)</option>
       </select>
       <input onChange={this.handleName} ref={"name"} type="text" className="ingr-place form-control" id="name" placeholder="Ingredient"/>
       <button id="submit-ingredient" type="button" className="btn btn-default">Add</button>
   </div>
 </div>

      // <div className="recipe-form">
      //   <form className="holding" onSubmit={this.handleNewRecipe}>
      //     <span className="make">Makes</span>
      //     <input type="text" className="servings" onChange={this.handleNameChange} ></input>
      //     <span className="how-many">Servings</span>
      //     <button className="btn btn-primary">Adjust Recipe</button>
      //   </form>
      // </div>

)
}
})
 var RecipeForm = React.createClass({
 getInitialState: function(){
 var ingredients = new IngredientCollection();
 ingredients.add([{}]);

return{
  ingredients: ingredients,
  recipe: new Recipe()
};
},
componentWillMount: function(){
var self = this;
var recipe = this.state.recipe;

recipe.on('change', this.update);
this.state.ingredients.on('add', this.update);
},
update: function(){
this.forceUpdate();
},
handleSubmit: function(e){
e.preventDefault();
var router = this.props.router;

var recipe = this.state.recipe;
var ingredients = this.state.ingredients;

recipe.set('ingredients', ingredients.toJSON());
console.log(recipe);

recipe.save().done(function(e){
  router.navigate('recipes/add', {trigger: true});
});
},
handleTitleChange: function(e){
this.state.recipe.set('title', e.target.value)
},
render: function(){
return(
  <form>
    <IngredientForm />
  </form>
)
}
})
module.exports = RecipeForm;

我得到“无法读取未定义的属性‘集’”。我以为我设置了？除了我到目前为止写的内容之外，我不明白我应该如何定义它。如果有人有任何想法请发表，这是一个需要尽快完成的项目！

Answer 1

您好，您似乎没有从父级传递ingredient 属性。您可能希望使用 getDefaultProps 来设置您的 ingredient 属性。否则，请确保在初始化成分表单时传递 ingredient 属性。

<IngredientForm ingredient={myIngredient}/>

Answer 2

请确保您的应用在 set 方法调用之前已定义。