我正在研究React-Native \ Redux App
我需要它来生成输入字段时更新状态。
任何帮助都将受到高度赞赏。
由于
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));
},
这会渲染产品,TextInput会填充数量值。另一个是它呈现的时候,我应该(不一定)发出一个动作
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>
)
答案 0 :(得分:0)
您可以尝试在componentDidUpdate方法中设置状态(您可以这样做):您只需要小心并检测您必须在哪种情况下调用setState以避免无限递归。
答案 1 :(得分:0)
你有一个递归。计算数量值会触发handleInputChange
,这会在重新渲染组件时触发数量计算。
我不认为您在计算数量值时甚至需要手动触发handleInputChange
。你不应该。
流程应该是这样的:
handleInputChange
。updateProductQuantity
发生),新值将通过道具再次传递给组件(返回步骤1)。