Array passed in child LWC is showing null in connectedcallback

Question

I have passed an array of object from parent to child lwc, in connectedCallback function, it is showing null, although other parameters passed are having value in connectedCallback. Please find my code:

import { LightningElement, api, track } from 'lwc';

import calculateTotal from '@salesforce/apex/webComponentController.calculateTotal';

export default class WebComponentCart extends LightningElement {
    @api productarray;
    @api salestax;
    @api shippingcharges;
    @track calculateTotal;
    @track error;

    connectedCallback(){
        console.log(this.productarray);
        console.log(this.shippingcharges);
        calculateTotal({shippingcharges : this.shippingcharges, salestax : this.salestax, pricebookProductArray : this.productarray})
        .then(result => {
            this.calculateTotal = result;
        })
        .catch(error => {
            this.error = error;
        });
    }
}

Parent code:

<div if:true={isOpenCart}>
        <c-web-component-cart productarray={productArray} shippingcharges={shippingCharges}
           salestax={salesTax}></c-web-component-cart>
    </div>

It is working fine, as I am able to display list in child component, but in connectedcallback, i want to pass the array in apex method, and the value is null. And also in console.log, they are no records.

webcomponentparent.js

handleProductArrayChange(event){
    this.productArray = event.detail.productArray;
    this.isOpenCart = event.detail.isOpenCart;
    this.islistOpen = event.detail.islistOpen;
}

This event is getting fired from another component: webcomponentlist.js

openCart(event){
    this.isOpenCart = true;
    this.cartArray = {isOpenCart : this.isOpenCart, productArray : this.productArray, isListOpen : this.isListOpen};

    const selectedEvent = new CustomEvent("productarraychange", {
        detail: this.cartArray
      });
  
      // Dispatches the event.
      this.dispatchEvent(selectedEvent);

}

Apex Method:

@AuraEnabled(cacheable=true)
public static decimal calculateTotal(Decimal shippingcharges, Decimal salestax, List<PriceBookEntry2> pricebookProductArray){
    System.debug(shippingcharges); //7.99
    System.debug(salestax); //0.08
    System.debug(pricebookProductArray); // 2 records which are selected but all field values are null.
    Decimal total = 0;
    Decimal calculatedPrice = 0;
    for(PriceBookEntry2 pbe : pricebookProductArray){
        System.debug('pbe.subtotal:'+pbe.subtotal);
        total = total + pbe.subtotal;
    }

    system.debug('total:'+total);

    calculatedPrice = total + salestax + shippingcharges;

    return calculatedPrice;  
    
}

public class PriceBookEntry2{
         @AuraEnabled
         public String priceBookEntryId; 
         @AuraEnabled
         public String productId; 
         @AuraEnabled
         public String productName; 
         @AuraEnabled
         public String productCode;
         @AuraEnabled
         public String priceBookId;
         @AuraEnabled
         public String priceBookName;
         @AuraEnabled
         public Decimal priceUnit; 
         @AuraEnabled
         public Integer quantity;
         @AuraEnabled
         public Decimal subtotal;

         
         public PriceBookEntry2(){
             priceUnit = 0;
             quantity = 0;
             subtotal = 0;
         }
    }

Answer 1

It sounds like your code is running into a race condition. I'd write this so that the calculation occurs whenever all the data is available:

_shippingcharges;
_salestax;
_productarray;
@api set shippingcharges(value) {
    this._shippingcharges = value;
    this.doCalc();
}
get shippingcharges() {
    return this._shippingcharges;
}
@api set salestax(value) {
    this._salestax = value;
    this.doCalc();
}
get salestax() {
    return this._salestax;
}
@api set productarray(value) {
    this._productarray = value;
    this.doCalc();
}
get productarray() {
    return this._productarray;
}
doCalc() {
    if (this.shippingcharges && this.salestax && this.productarray) {
        calculateTotal({ shippingcharges: this.shippingcharges, salestax: this.salestax, pricebookProductArray: this.productarray })
            .then(result => {
                this.calculateTotal = result;
            })
            .catch(error => {
                this.error = error;
            });
    
    }
}