React:警告:setState(..):在现有状态转换期间无法更新
React: Warning: setState(...): Cannot update during an existing state transition
当我试图插入一个新的配方元素时,我的项目不断崩溃。我使用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 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>
)
}
});
您应该将componentWillMount中的代码移动到getInitialState。
getInitialState: function(){
return {recipes: this.props.recipes};
},
需要将RecipeList组件更改为
<RecipeList recipes={this.state.recipes} onChange={this.handleChange}/>
然后从CCD_ 5而不是直接在CCD_。必须使用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>
);
}
});
相关文章:
- 无法在现有状态转换期间更新-未使用任何非法的setState()
- 将字符串转换为数组使用javascript更新一个值并返回一个字符串
- 更新分组条形图(转换或删除元素组)
- d3.pack()转换更新
- CSS转换未在增加高度时更新背景色
- 更新int数组会在Mongo-shell中转换为双数组
- d3.js无法使用通用的更新模式和转换
- 如何转换我的 js 代码,以便对象的每个属性都通过输入值和单选按钮值更新
- 使用 JavaScript 更新转换属性中的 rotate() 属性
- 转换地段图,使其以 60 秒的间隔动态更新
- 更新文档,但出现错误:对于未定义的值,强制转换为字符串失败
- 在保存新的模型实例之后,在Ember.js中转换到路由之前,更新资源模型
- d3js-使用多行更新转换
- 如何在Javascript中更新SVG元素上的转换
- CSS转换没有在所有浏览器中使用jQuery进行更新
- D3.js转换多行-数据不更新
- 如何在React中进行两天的数据绑定,当输入值A更新时B更新,反之亦然,同时保留以前转换的历史记录
- index.js:1335警告:setState(..):无法在现有状态转换期间更新(例如在' render '或其他组
- 在转换(SVG)之后获得更新的多边形点
- 如何在D3.JS中使用转换更新Y域