React：Uncaught TypeError：未定義のプロパティ 'set'を読み取ることができません。

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; 

Imは「未定義のプロパティを読み取れません」というメッセージが表示されます。私はそれを設定したと思った？私はこれまでに書かれたものとは別のものを定義することが他にどれほどあるかを理解していない。誰かがアイデアを投稿してください、これはすぐに完了する必要があるプロジェクトのためです！

Answer 1

こんにちは、親からingredientプロパティを渡していないようです。 プロパティを設定するには、getDefaultPropsを使用します。それ以外の場合は、IngredientFormを初期化するときにingredientプロパティを渡してください。

<IngredientForm ingredient={myIngredient}/> 

Answer 2

あなたのアプリがsetメソッド呼び出しの前に定義されているかどうかを確認してください。