0

新しいレシピ要素を挿入しようとすると、プロジェクトがクラッシュし続けます。を使用してthis.state.recipes.map...、RecipeList必要に応じてレシピを更新できます (削除、編集など)。削除機能は機能しますが、新しいレシピ要素を追加できません。
ステートメントを に切り替えるとthis.props.recipes.map...、問題なく要素を挿入できますが、削除によって状態の変更がトリガーされ、小道具ではなく更新を反映するために状態の変更が必要になるため、削除できません。この問題に関するヒントはありますか？ありがとう！

レシピ一覧：

var RecipeList = React.createClass({
getInitialState: function(){
    return {recipes: []};
},
deleteRecipe: function(recipe){
    var curRecipes = this.state.recipes.slice('');
    curRecipes.splice(recipe.recipeKey,1);
    this.setState({recipes: curRecipes});
},
componentWillMount: function(){
    this.setState({recipes: this.props.recipes});
},
render: function(){

    var recipeNodes = this.state.recipes.map(function(recipe,index){
        return <Recipe onDelete={this.deleteRecipe} recipeKey={index} key={index} recipeTitle={recipe.recipeTitle} ingredients={recipe.ingredients}  instructions={recipe.instructions} />
    },this);
    return(
        <div>
            {recipeNodes}
        </div>
    );
}
});

レシピ容器:

var RecipeBox = React.createClass({
getInitialState: function(){
    return {showForm: false,
            recipes: []
        };
},
openForm: function(){
    this.setState({showForm: true});
},
handleRecipeSubmit: function(recipe){
    var curRecipes = this.state.recipes.slice('');
    curRecipes.push({recipeTitle: recipe.recipeTitle,ingredients: recipe.ingredients, instructions: recipe.instructions});
    this.setState({recipes: curRecipes});
},
render: function(){
    return(
        <div id="recipeBox">
            <RecipeList recipes={this.state.recipes} />
            <div className="recipeButtons">
                <button id="addRecipeButton" className="btn-style" onClick={this.openForm}>Add Recipe</button>
            </div>
            {this.state.showForm ? this.refs.dialogWithCallBacks.show() : null}
            <SkyLight
                dialogStyles={formDialog}
                ref="dialogWithCallBacks"
                title="Add Recipe">
                <RecipeForm onRecipeSubmit={this.handleRecipeSubmit} skylightRef={this.refs.dialogWithCallBacks} />
            </SkyLight>
        </div>
    );
}
});

レシピフォーム:

var RecipeForm = React.createClass({
getInitialState: function(){
    return {hideDialog: false};
},
getFormData: function(){
    var ingredients= document.getElementsByClassName("ingredient"),
        recipeName = document.getElementsByName('recipeName')[0].value,
        instructions = document.querySelector('textarea').value,
        data = [];

    ingredients = [].slice.call(ingredients).map(function(ingredient,index){
        return {
            "quantity": ingredient.childNodes[0].value,
            "ingredient": ingredient.childNodes[1].value,
            "unit": ingredient.childNodes[2].value
        };
    });

    // Combine results into output array
    data.push(recipeName);
    data.push(ingredients);
    data.push(instructions);

    return data;
},
submitRecipe: function(event){
    event.preventDefault();
    var data = this.getFormData();

    // Hide the SkyLight modal container
    this.setState({hideDialog: true});

    // Submit form
    this.props.onRecipeSubmit({recipeTitle: data[0], ingredients: data[1], instructions: data[2]});
},
render: function(){

    return(
        <form onSubmit={this.submitRecipe}>
            <section className="recipe-main">
                <h2 style={{'border-bottom': 'none'}}>Recipe Name</h2>
                <RecipeFormName />
                <h2 style={{'border-bottom': 'none'}}>Ingredients</h2>
                <RecipeFormIngredients />
            </section>
            <RecipeFormInstructions />
            <input type="submit" value="Add Recipe" />
            {this.state.hideDialog ? this.props.skylightRef.hide() : null}
        </form>
    )
}
});
4

2 に答える 2

1

RecipeList コンポーネントを

<RecipeList recipes={this.state.recipes} onChange={this.handleChange}/>

RecipeBox次に、 で直接ではなく から削除の変更を処理しますRecipeList。this.props.map...新しいレシピを表示したり、表示されているレシピを削除したりするために使用する必要があります。

var RecipeList = React.createClass({
    getInitialState: function(){
        return {recipes: this.props.recipes};
    },
    deleteRecipe: function(recipe){
        var curRecipes = this.props.recipes.slice('');
        curRecipes.splice(recipe.recipeKey,1);
        this.props.onChange({recipes: curRecipes});
    },
    render: function(){

        var recipeNodes = this.props.recipes.map(function(recipe,index){
            return <Recipe onDelete={this.deleteRecipe} recipeKey={index} key={index} recipeName={recipe.recipeName} ingredients={recipe.ingredients}      instructions={recipe.instructions} />
        },this);

        return(
            <div>
                {recipeNodes}
            </div>
        );
    }
});
于 2016-08-08T01:26:09.137 に答える
1

componentWillMount のコードを getInitialState に移動する必要があります。

getInitialState: function(){
    return {recipes: this.props.recipes};
},
于 2016-08-07T05:46:24.463 に答える