LWC wire function wont acknowledge the controller property

lightninglightning-web-components

Im missing something obvious while trying to add an index property to an array. Can anyone point to why this would be happening? Im gonna cringe when someone points this out, I just know it but Im stuck!

At render I get with this LWC component's @wire target property or method threw an error during value provisioning. Original error:
[Cannot read properties of undefined (reading 'settingsWrapper')]

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = [];
            data.forEach(function(elem,i){
                var clone = Object.assign({}, elem); // this should give me an extensible object
                clone.index = i; // want to drop index in here for use later
                this.settingsWrapper.push(clone); // seems I cant push to an undefined object?
            });
        }
        
    };
}

Any pointers would be most appreciated!

Best Answer

Consider using arrow function => instead of function itself.

In regular functions the this keyword represented the object (function, object and function are the same in js) that called the function.

With arrow functions the this keyword always represents the object that defined the arrow function:

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = [];
            data.forEach((elem,i) => {
                var clone = Object.assign({}, elem); // this should give me an extensible object
                clone.index = i; // want to drop index in here for use later
                this.settingsWrapper.push(clone); // seems I cant push to an undefined object?
            });
        }
        
    };
}

There is a good trailhead module Understand JavaScript Functions related to this topic.

by the way, also consider using map instead of forEach

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = data.map((elem,index) => ({...elem, index}));
        }   
    };
}

Related Solutions

[SalesForce] I’m getting this error: LWC component’s @wire target property or method threw an error during value provisioning

Welcome to SF Stack Exchange.

You are likely getting this error because an error must have occurred during your wire process.

From the documentation:

data (Any type)—The value supplied by the adapter.

error (Error)—An error if the adapter wasn’t able to supply the requested data or if the adapter wasn’t found. Otherwise, this property is undefined.

In this case the error object came back instead of the data. Essentially since data did not come back your code attempts to execute undefined.lists which throws the error [Cannot read property 'lists' of undefined] you are seeing.

What you need to do is add an if statement to verify if data came back or not like so:

@wire(getListUi, {objectApiName: PRODUCT_OBJECT})
wiredlistView({error,data}) {
    if (data) {
        this.allListViews = data.lists;
        var listViewData = [];
        for(var i=0;i<this.allListViews.length;i++){
            listViewData.push({"label" : this.allListViews[i].label, "value" : this.allListViews[i].apiName});
    } else if (error) {
        console.log('An error has occurred:');
        console.log(error);
        // handle your error.
    }
}

[SalesForce] Can we call LWC wire adapters imperatively

No, wire methods cannot be called imperatively.

Use Apex in these scenarios:

...

To call a method imperatively, as opposed to via the wire service. You may want to call a method imperatively in response to clicking a button, or to delay loading to outside the critical path. When you call an Apex method imperatively, to refresh the data, invoke the Apex method again.

If you need to do some special handling afterwards, set this up in the wire handler:

@wire(method, params) 
 wireHandler({data,error}) {
  if(data) {
   this.handleData(data);
  }
  if(error) {
   this.handleError(error);
  }
 }

To actually trigger the call, you can set a reactive variable:

someVariable;
@wire(method, {param:'$someVariable'})

If you wanted to further make the call dynamic, you can do that, too!

someVariable;
someCallback;
@wire(method, {param:'$someVariable'}) 
 wireHandler({data,error}) {
  if(data) {
   this.someCallback(data);
  }
  if(error) {
   this.handleError(error);
  }
 }
 handleClick(event) {
  this.someCallback = (result) => {
   console.log(result);
  };
  this.someVariable = 'Hello World';
 }

Best Answer

Related Solutions

[SalesForce] I’m getting this error: LWC component’s @wire target property or method threw an error during value provisioning

[SalesForce] Can we call LWC wire adapters imperatively

Related Topic