Javascript 反应：警告：设置状态（…）：无法在现有状态转换期间更新

当我尝试插入新的配方元素时，我的项目不断崩溃。我使用

RecipeList

中的

this.state.recipes.map…

可以根据需要更新配方（例如删除、编辑等）。删除功能正常，但我无法添加新的配方元素。
如果我将语句切换到

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 RecipeList=React.createClass({
getInitialState:函数（）{
返回{recipes:[]}；
},
deleteRecipe:函数（配方）{
var curRecipes=this.state.recipes.slice（“”）；
curRecipes.拼接（配方recipeKey，1）；
this.setState（{recipes:curRecipes}）；
},
componentWillMount:function（）{
this.setState（{recipes:this.props.recipes}）；
},
render:function（）{
var recipeNodes=this.state.recipes.map（函数（配方，索引）{
返回
}，这个）；
返回(
{recipeNodes}
);
}
});

配方容器：

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 RecipeBox=React.createClass({
getInitialState:函数（）{
返回{showForm:false，
食谱：[]
};
},
openForm:function（）{
this.setState（{showForm:true}）；
},
HandlerRecipSubmit:函数（配方）{
var curRecipes=this.state.recipes.slice（“”）；
curRecipes.push（{recipeTitle:recipe.recipeTitle，配料：recipe.配料，说明：recipe.instructions}）；
this.setState（{recipes:curRecipes}）；
},
render:function（）{
返回(
添加配方
{this.state.showForm？this.refs.dialogWithCallBacks.show（）：null}
);
}
});

配方表：

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>
    )
}
});

var RecipeForm=React.createClass({
getInitialState:函数（）{
返回{hideDialog:false}；
},
getFormData:函数（）{
var成分=document.getElementsByCassName（“成分”），
recipeName=document.getElementsByName（'recipeName'）[0]。值，
说明=document.querySelector（'textarea'）。值，
数据=[]；
配料=[].slice.call（配料）.map（函数（配料，索引）{
返回{
“数量”：成分。子节点[0]。值，
“成分”：成分。子节点[1]。值，
“单位”：成分。子节点[2]。值
};
});
//将结果合并到输出数组中
数据推送（recipeName）；
数据推送（成分）；
数据推送（指令）；
返回数据；
},
提交人：功能（事件）{
event.preventDefault（）；
var data=this.getFormData（）；
//隐藏天窗模式容器
this.setState（{hideDialog:true}）；
//提交表格
this.props.onRecipeSubmit（{recipeTitle:data[0]，Components:data[1]，instructions:data[2]}）；
},
render:function（）{
返回(
配方名
成分
{this.state.hideDialog？this.props.skylightRef.hide（）：null}
)
}
});

您应该将componentWillMount中的代码移动到getInitialState

getInitialState: function(){
    return {recipes: this.props.recipes};
},

---

您应该将componentWillMount中的代码移动到getInitialState

getInitialState: function(){
    return {recipes: this.props.recipes};
},

---

需要将RecipeList组件更改为

然后从

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>
        );
    }
});

var RecipeList=React.createClass({
getInitialState:函数（）{
返回{recipes:this.props.recipes}；
},
deleteRecipe:函数（配方）{
var curRecipes=this.props.recipes.slice（“”）；
curRecipes.拼接（配方recipeKey，1）；
this.props.onChange（{recipes:curRecipes}）；
},
render:function（）{
var recipeNodes=this.props.recipes.map（函数（配方，索引）{
返回
}，这个）；
返回(
{recipeNodes}
);
}
});

需要将RecipeList组件更改为

然后从

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>
        );
    }
});

var RecipeList=React.createClass({
getInitialState:函数（）{
返回{recipes:this.props.recipes}；
},
deleteRecipe:函数（配方）{
var curRecipes=this.props.recipes.slice（“”）；
curRecipes.拼接（配方recipeKey，1）；
this.props.onChange（{recipes:curRecipes}）；
},
render:function（）{
var recipeNodes=this.props.recipes.map（函数（配方，索引）{
返回
}，这个）；
返回(
{recipeNodes}
);
}
});

千万不要将DOM与react:

document.getElementsByClassName

（在

getFormData

中）一起使用。检查文档：谢谢。删除了

document.getElementsByClassName

并重新构造了获取表单数据的方式，但它仍然会给我相同的错误。您不应该将DOM这样用于react:

document.getElementsByClassName

（在

getFormData

中）。检查文档：谢谢。删除了

document.getElementsByCassName

，并重新构造了获取表单数据的方式，但仍会出现相同的错误。我尝试了此操作，但仍会出现相同的错误。找不到错误提到的状态转换发生在何处。我尝试了此操作，但仍然收到相同的错误。找不到它的位置