ReactNativeJS:警告:setState(..):在现有状态转换期间无法更新(例如在“渲染”中)
ReactNativeJS: Warning: setState(...): Cannot update during an existing state transition (such as within `render`)
我正在开发一个 React-Native''Redux 应用程序
- 我正在预填充它们渲染的。这很好用。2.填充后,我想调用一个调度操作,以便每个的值用于执行一些计算并稍后存储:我知道在渲染过程中不可能更新状态,但是我可以做到这一点吗?
我需要它在生成输入字段时更新状态。
任何帮助将不胜感激。
谢谢
handleInputChange: function(product, productId, input){
let { currentSale, updateProductQuantity } = this.props;
let updatedCurrentSale = TransactionsService.updateProductQuantity(currentSale, product, productId, input);
let transaction = TransactionsService.packageTransaction(updatedCurrentSale);
updateProductQuantity(updatedCurrentSale, transaction)
},
updateProductQuantity调用disaptch操作,这就是我们遇到问题的地方
handleQuantityValue: function(product, productId){
let { orderSelected } = this.props;
if(orderSelected){
var index = orderSelected.products.findIndex(x => x.product_id==productId)
}
var i = index
if( i >= 0){
var qtty = orderSelected.products[i].product_quantity
this.handleInputChange(product, productId, qtty).bind(this)
return qtty.toString()
}
else{
return ''
}
},
返回数量值
renderProducts: function(){
let { currentUser, currentSale, orderSelected } = this.props;
return _.map(currentSale.productSales, function(product, productId){
var qtty = this.handleQuantityValue(product, productId)
return <View style={Styles.questionPanel}>
<Question
product={product}
productId= {productId}
Order={ orderSelected }
quantity= { qtty }
onInputChange={this.handleInputChange}
/>
</View>
}.bind(this));
},
这将呈现产品,并且文本输入填充数量值。另一个是,当它呈现时,我应该(不一定(调度一个动作
render: function(){
let { currentSale } = this.props;
return (
<View style={{flex: 1}}>
<NavBar navigator={this.props.navigator} />
<ScrollView>
<Text style={[Styles.dayDisplayHeader, Styles.spacing]}>
Enter Your Sale:
</Text>
{this.renderProducts()}
<Calculator
productSales={currentSale.productSales}
totalSales={currentSale.totalSales}
/>
<Button text={'Save'} whenTapped={this.handleSubmit} />
</ScrollView>
</View>
)
您可以尝试在 componentDidUpdate 方法中设置状态(允许您这样做(:您只需要小心并检测在哪种情况下必须调用 setState 以避免无限递归。
setState in componentDidUpdate
你有一个递归。计算数量值会触发handleInputChange
,这反过来又会在重新渲染组件时触发数量计算。
我认为您在计算数量值时甚至不需要手动触发handleInputChange
。你不应该。
流程应如下所示:
- 通过道具传递数据。
- 渲染时计算道具的数量。
- 仅当用户更改值时
handleInputChange
。 - 一旦 redux 存储被更新(我假设它通过
updateProductQuantity
发生(,新值将通过 props 再次传递给组件(返回步骤 1(。
相关文章:
- 手持:删除行后更新渲染器
- AngularJS更新控制器变量并再次渲染视图
- 如何更新集合数据并使用骨干木偶重新渲染
- React在重新渲染时未更新JSON提要
- 更新数组后,ng重复双重渲染
- ReactJS道具已更新,但字段不会重新渲染
- 合并后的几何体;t渲染更新
- Angular Directive格式化程序/渲染器不更新
- 如何在 React 组件渲染之前更新猴面包树叶数据
- Meteor - 被动更新未渲染的数据
- 更新输入类型时间的值(重新渲染)并使用 React 再次关注元素
- 流星,更新时的反应式数组渲染问题
- 从该组件外部更新已渲染的 ReactJS 组件的正确方法
- React Native:通过 setState 更新 ListView 数据源是否会重新渲染整个组件
- 自动建议反应.js组件不会在渲染时更新输入样式
- Meteor JS渲染和DOM更新
- 在初始选择更改时,jquery不会更新/渲染视图中的html
- 如何用进度更新渲染的翡翠页面?
- ReactJS皮质对象更新渲染未调用
- 当ng include改变角度时更新渲染