inside of ponentWillReceiveProps function I called another function:

ponentWillReceiveProps(nextProps){

  if(nextProps.cart){
    var cart = nextProps.cart;
    this.setState({cart:cart,
      offCart:cartHelper.getOffCart(cart),
      totalPay:cartHelper.getTotalPayCart(cart)});

      this.useFinance()//at this line makes this error

  }

  useFinance(){

    if(this.state.useFinance)
    {
      this.setState({useFinance:false})
    }else{
      if(this.state.totalPay > this.state.user.user.finance)
      {
        this.setState({useFinance:false})
      }else{
        this.setState({useFinance:true})
      }
    }

  }

I'm using react-redux and I should call useFinance function When the cart is updated.

I got this error message:

warning.js?8a56:33 Warning: performUpdateIfNecessary: Unexpected batch number (current 2, pending 1)

inside of ponentWillReceiveProps function I called another function:

ponentWillReceiveProps(nextProps){

  if(nextProps.cart){
    var cart = nextProps.cart;
    this.setState({cart:cart,
      offCart:cartHelper.getOffCart(cart),
      totalPay:cartHelper.getTotalPayCart(cart)});

      this.useFinance()//at this line makes this error

  }

  useFinance(){

    if(this.state.useFinance)
    {
      this.setState({useFinance:false})
    }else{
      if(this.state.totalPay > this.state.user.user.finance)
      {
        this.setState({useFinance:false})
      }else{
        this.setState({useFinance:true})
      }
    }

  }

I'm using react-redux and I should call useFinance function When the cart is updated.

I got this error message:

warning.js?8a56:33 Warning: performUpdateIfNecessary: Unexpected batch number (current 2, pending 1)

• javascript
• reactjs

2 Answers 2

Do not call setState every time in ponentWillReceiveProps if value is still same. Check value which receives from nextprops and actual value inside the state if they are not equal then call setState.

ponentWillReceiveProps(nextProps) {

    if (nextProps.cart && nextProps.cart != this.props.cart) { //Do this in case of object => JSON.stringify(nextProps.cart) != JSON.stringify(this.props.cart)
        var cart = nextProps.cart;
        this.setState({
            cart: cart,
            offCart: cartHelper.getOffCart(cart),
            totalPay: cartHelper.getTotalPayCart(cart)
        });
        this.useFinance() //at this line makes this error

    }
}

useFinance() {

    if (this.state.useFinance) {
        this.setState({
            useFinance: false
        })
    } else {
        if (!(this.state.totalPay > this.state.user.user.finance)) {
            this.setState({
                useFinance: true
            })
        } 
    }

}

I would try to perform single setState update like:

ponentWillReceiveProps(nextProps){

  if(nextProps.cart){
    var cart = nextProps.cart;

    const useFinance = !this.state.useFinance || (this.state.totalPay <= this.state.user.user.finance)
    this.setState({
      useFinance,
      cart: cart,
      offCart: cartHelper.getOffCart(cart),
      totalPay: cartHelper.getTotalPayCart(cart)
    });
  }
}

However, this may end up in an infinite update as you

update state -> ponentWillRecieveProps -> update state -> ponentWillReceiveProps ...

That's why you need to check if an update is necessary:

ponentWillReceiveProps(nextProps){

  if(this.doWeNeedAnUpdate(this.props, nextProps)){
    ...
  }
}