Question

我正在研究React-Native \ Redux App

我在渲染时预先填充了一个。这很好。 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));

}，

这会渲染产品，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>
)

Answer 1

您可以尝试在componentDidUpdate方法中设置状态（您可以这样做）：您只需要小心并检测您必须在哪种情况下调用setState以避免无限递归。

setState inside componentDidUpdate

Answer 2

你有一个递归。计算数量值会触发handleInputChange，这会在重新渲染组件时触发数量计算。

我不认为您在计算数量值时甚至需要手动触发handleInputChange。你不应该。

流程应该是这样的：

通过道具传递数据。
渲染时从道具计算数量。
handleInputChange。
一旦redux商店更新（我假设它通过updateProductQuantity发生），新值将通过道具再次传递给组件（返回步骤1）。

ReactNativeJS：警告：setState（...）：在现有状态转换期间无法更新（例如在`render`中）

2 个答案: