点击New按钮为Lightning Datatable新增行时出现Undefined错误求助

错误原因分析 #

你的代码存在两处直接导致Undefined错误的问题：

• 局部变量newRow被错误地用this.newRow访问，this.newRow并未在组件实例中定义
• 打印数组时直接使用strpData，未通过this.访问组件实例的strpData属性
• 额外问题：直接用push修改数组可能无法触发LWC的响应式UI更新，LWC对数组的响应式依赖引用变更来触发视图更新

修正后的代码 #

Test.html（无需修改） #

<template>
<lightning-card >
<lightning-button-group>
      <lightning-button label="New" onclick={addRow}></lightning-button>
</lightning-button-group>
<lightning-datatable data={strpData} columns={columns} onsave={saveHandleAction}
  draft-values={fldsItemValues} key-field="Id" onrowselection={getSelectedRows}>
     </lightning-datatable>
</lightning-card >
</template>

Test.js（修正版本） #

import { LightningElement, track, api, wire } from 'lwc';
const columns = [
    {label:'NUMBER', fieldName:'Name' },
    {label: 'Test1', fieldName: 'Test1'}
];
export default class Test extends LightningElement {
@track columns = columns;
@track strpData = [];
addRow() {  
       console.log('>>>add row>>>');
        const newRow ={'Name':'','Test1':''};
        // 直接访问局部变量newRow，而非this.newRow
        console.log('>>>new row>>>'+JSON.stringify(newRow));
        // 创建新数组触发响应式更新，替代push方法
        this.strpData = [...this.strpData, newRow];
        // 通过this访问组件实例的strpData属性
        console.log('strpData ==>>> '+JSON.stringify(this.strpData));
    }
}

关键修正点 #

• 访问局部变量newRow时直接使用变量名，不要添加this.前缀
• 打印组件数组必须用this.strpData，确保访问的是组件实例的属性
• 使用扩展运算符[...this.strpData, newRow]创建新数组，保证LWC能检测到数据变化并更新UI

内容的提问来源于stack exchange，提问作者prasannakumar chebrolu