ReactNativeJS: Warning: setState(...): Cannot update during an existing state transition (such as within `render`)

Question

I am working on a React-Native\Redux App

1. I am pre-populating a 's as they render. This works out fine. 2.After population it I would like to call a dispatch action so that the value of each is used to perform some calculations and later to be stored: I know its impossible to update state during render, but is there away I can do achieve this?

I need it to update the state as it generated the input fields.

Any help will be highly appreciated.

Thanks

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 calls the disaptch action, and that's where we have a problem

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 ''
  }
},

returns quantity value

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

},

This renders products and TextInput is populated with the quantity value. The other this is that as it renders, i should(not necessarily) dispatch an action

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

You can try setting the state (you are allowed to do that) in the componentDidUpdate method: you have only to be careful and detect in which situation you have to do call the setState to avoid infinite recursion.

setState inside componentDidUpdate

Answer 2

You have a recursion. Calculating a quantity value triggers handleInputChange, which in turn triggers quantity calculation when re-rendering component.

I don't think you even need to trigger handleInputChange manually when calculating quantity value. You shouldn't.

The flow should be like this:

1. Pass data via props.
2. Calculate quantity from props when rendering.
3. handleInputChange only when value is changed by user.
4. Once the redux store is updated (I assume it happens via updateProductQuantity) new values will be passed again to the component via props (go back to step 1).