3

How to avoid error Cannot read property of undefined using LWC Wired properties but to display two properties? enter image description hereafterRender threw an error in 'c:tryc' [Cannot read property 'x' of undefined]

HTML file of tryc.html

<template>
    x.data {x.data}<br/>
    y.data {y.data}<br/>
    x.data.x {x.data.x}<br/>
    y.data.y {y.data.y}<br/>
</template>

Listing of Tryc.js

import { LightningElement, wire, api } from 'lwc';
import getX from '@salesforce/apex/TryCont.getX'; 
import getY from '@salesforce/apex/TryCont.getY'; 

export default class Tryc extends LightningElement {
    @wire(getX)
    x
    @wire(getY)
    y
}

Apex Controller

public with sharing class TryCont {

    @AuraEnabled(Cacheable=true)
    public static Map<String, Object> getX() {
        return new Map<String, Object>{'x'=>'y'};
    }
    @AuraEnabled(Cacheable=true)
    public static Map<String, Object> getY() {
        return new Map<String, Object>{'y'=>'x'};
    }

}
6

To avoid this problems, it is needed to surround the code with <template if:true tag, usually it is clear and obvious when we rely on load of one parameter. However, when the code depends on two parameters, it is needed to add additional property which would track if both properties has been loaded

@api
get loaded() {
    return !!this.x.data && !!this.y.data;
}

Modified template

<template>

    <template if:true={loaded}>
        loaded!<br/>
        x.data {x.data}<br/>
        y.data {y.data}<br/>
        x.data.x {x.data.x}<br/>
        y.data.y {y.data.y}<br/>
    </template>

</template>

And final version of Lightning Javascript Web Module

import { LightningElement, wire, api } from 'lwc';
import getX from '@salesforce/apex/TryCont.getX'; 
import getY from '@salesforce/apex/TryCont.getY'; 

export default class Tryc extends LightningElement {
    @wire(getX)
    x
    @wire(getY)
    y
    @api
    get loaded() {
        return !!this.x.data && !!this.y.data;
    }
}
5
  • Thanks for the tip ! – Martin Lezer Jun 4 '19 at 9:56
  • Great answer. You shouldn't need the @api on the loaded getter though since that will only be called from the same components template file. – TrevorBliss Jun 7 '19 at 17:31
  • I can't make it @ track to rerender the component once value of loaded is changed so I must use @ api – Patlatus Jun 10 '19 at 10:50
  • @TrevorBliss so I am afraid that if I remove api decorator, lightning web component will not be rerendered once the value of loaded is changed, so it will hang in the unloaded state or will load immediately if user is lucky – Patlatus Jun 10 '19 at 10:53
  • You don’t need @api or @track on getters referenced from the template. Your getter relies on reactive @wire properties. The system understand transitive dependencies. – Kevin Venkiteswaran Jul 17 '19 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.