Error during LWC component connect phase: [Cannot read properties of undefined (reading 'data')]

Question

Can someone help me understand why I am having an error?

Error during LWC component connect phase: [Cannot read properties of undefined (reading 'data')]

When I use @wire, it works out fine, but when I call apex imperatively, this error shows up. I based it from lwc/apexWireMethodToFunction.

.cls

public with sharing class lwc_poConfirmation {

@AuraEnabled(cacheable=true)
public static List<Purchase_Order_Line__c> getPoLines(Integer yearSelected, Integer monthSelected){
    // Integer yearSelected = 2023;
    // Integer monthSelected = 1;
    Date fromDate = Date.newInstance(yearSelected, monthSelected, 1); 
    Date toDate = fromDate.addMonths(1).addDays(-1);

    return [ select ID, Name, SF_Item_Code_SMF__c
                    , SF_Item_Name_SMF__c
                    , SF_Storage_Area_SMF__c
                    , SF_Quantity_SMF__c
                    , SF_Unit_Price_SMF__c
                    , SF_Subtotal__c
                    , SF_DelDate_SMF__c
                    , SF_Supplier_SMF__r.Name
                    , SF_Supplier_SMF__r.ID
                from Purchase_Order_Line__c 
                where   SF_DelDate_SMF__c >= :fromDate
                    and SF_DelDate_SMF__c <= :toDate
                    and SF_Line_Status__c = 'イワサキ受取確認済'
                    and SF_Invoice_Date__c = ''
                order by SF_Supplier_SMF__r.Name, SF_DelDate_SMF__c asc
            ];
}
}

.html

<template>

<div style="display: flex; height: 100%; ">
    <div  class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
        <div class="slds-panel__header">
            <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
            <div class="slds-panel__header-actions"> <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">
                <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                </svg> <span class="slds-assistive-text">Collapse Panel Header</span> </button>
            </div>
        </div>
        <div class="slds-panel__body">
            <!-- select year -->
            <lightning-combobox name="selectYear"
                                label="年" 
                                options={years} 
                                value={yearBox} 
                                onchange={selectChange}
                                required="true"
                                >
            </lightning-combobox>
            <!-- select month -->
            <lightning-combobox name="selectMonth"
                                label="月" 
                                options={months} 
                                value={monthBox} 
                                onchange={selectChange}
                                required="true"
                                >
            </lightning-combobox>
            <!-- <p>Selected year is: {yearSelected}</p>
            <p>Selected month is: {monthSelected}</p> -->
        </div>
    </div>

    <div style="overflow-x: auto; width: 100%;" >
        <div>
            <lightning-datatable
                    key-field="id"
                    data={poLines.data}
                    columns={columns}>
            </lightning-datatable>
        </div>
    </div>

    <template lwc:if={isError}>
        <div>{errorMessage}</div>
    </template>
</div>

.js

import { LightningElement, track, wire } from 'lwc';
import getPoLines from '@salesforce/apex/lwc_poConfirmation.getPoLines';

const today = new Date();
const thisYear = today.getFullYear();
const thisMonth = today.getMonth();

const columns = [
    { label: '仕入先名', fieldName: 'SF_Supplier_SMF__r.Name', cellAttributes: { alignment: 'left' } }
    ,{ label: '発注番号', fieldName: 'Name', cellAttributes: { alignment: 'left' } }
    ,{ label: '資材コード', fieldName: 'SF_Item_Code_SMF__c', cellAttributes: { alignment: 'left' } }
    ,{ label: '資材名', fieldName: 'SF_Item_Name_SMF__c', cellAttributes: { alignment: 'left' } }
    ,{ label: '数量', fieldName: 'SF_Quantity_SMF__c', cellAttributes: { alignment: 'left' } }
    ,{ label: '単価', fieldName: 'SF_Unit_Price_SMF__c', cellAttributes: { alignment: 'left' } }
    ,{ label: '小計', fieldName: 'SF_Subtotal__c', cellAttributes: { alignment: 'left' } }
    ,{ label: '納期', fieldName: 'SF_DelDate_SMF__c', cellAttributes: { alignment: 'left' } }
];

export default class Po_Confirmation extends LightningElement {
@track data;
@track isError = false;
@track errorMessage;

yearBox = this.years[1].value;
monthBox = this.months[thisMonth].value;
columns = columns;

yearSelected = thisYear;
monthSelected = thisMonth + 1;

connectedCallback(){
    this.loadPoLines();
}

loadPoLines(){
    getPoLines({yearSelected: this.yearSelected, monthSelected: this.monthSelected})
    .then(results=>{
        this.data=results;
        this.isError=false;
    })
    .catch(error=>{
        this.isError=true;
        this.errorMessage=error.body.message;
    })
}

get years() {
    var lastYear = thisYear - 1;
    var nextYear = thisYear + 1;

    return [
        { label: lastYear + '年', value: lastYear + '年' },
        { label: thisYear + '年', value: thisYear + '年' },
        { label: nextYear + '年', value: nextYear + '年' }
    ];
}

get months() {
    var monthReturn = [];

    for(let i = 0; i <= thisMonth; i++){
        monthReturn = [...monthReturn, { label: (i + 1) + '月' , value: (i + 1)+ '月' }];
    }
    for(let i = thisMonth + 1; i < 12; i++){
        monthReturn = [...monthReturn, { label: (i + 1) + '月' , value: (i + 1)+ '月' }];
    }
    return monthReturn;
}

selectChange(event) {
    const field = event.target.name;
    if (field === 'selectYear') {
        let tempval = event.detail.value;
        this.yearSelected = parseInt(tempval.replace("年", ""));
    } else if (field === 'selectMonth') {
        let tempval = event.detail.value;
        this.monthSelected = parseInt(tempval.replace("月", ""));
    }
}
}

Answer 1

You are referring poLines.data in lighting-datatable tag but its not declared in your JS file.

Try using data property in your html which is set using loadPoLines() as shown below :

<lightning-datatable 
    key-field="id" 
    data={data} 
    columns={columns}>
</lightning-datatable>

Also , initialise data property as an array as shown below :

@track data = [];