Lightning Web Component提交客户评价表单时脚本错误排查

我正在创建一个客户评价表单，但点击提交按钮测试时，持续出现<NoErrorObjectAvailable> Script error错误。请问问题可能出在哪里？

我的代码如下：

HTML模板 #

<template>
    <lightning-record-edit-form object-api-name="Customer_Review__c" onsubmit={handleSubmit} record-id={recordId}>
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="Hotel_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Price_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Staff_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Room_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Event_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Equipment_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Environment_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Manager_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Cocktail_Rating__c"></lightning-input-field>
        <lightning-input-field field-name="Drink_Rating__c"></lightning-input-field>
        <lightning-button type="submit" label="Submit Review"></lightning-button>
    </lightning-record-edit-form>
</template>

JavaScript代码 #

import { LightningElement, api } from 'lwc';

export default class Marriott extends LightningElement {
    @api
    handleSubmit(event) {
        // Prevent the form from being submitted
        event.preventDefault();

        // Get the form element
        const form = event.target;

        // Get the values of the form fields
        const values = {};
        for (let field of form.elements) {
            if (field.name) {
                values[field.name] = field.value;
            }
        }

        // Output the form values to the console
        console.log(values);

        // Clear the form fields
        form.reset();
    }
}

问题原因分析 #

1. @api装饰器滥用：handleSubmit只是组件内部的提交处理函数，不需要用@api暴露给外部组件。这个装饰器会让LWC框架错误地处理该方法，直接触发脚本错误。
2. 错误的字段取值方式：lightning-record-edit-form是LWC封装的组件，event.target并不是原生HTML表单元素，遍历form.elements的方式无法正确获取字段值，反而会因Shadow DOM的封装规则引发异常。
3. 原生reset()方法不兼容：LWC表单组件有自己的状态管理逻辑，直接调用原生DOM的reset()方法会破坏组件内部状态，导致报错。

修复后的代码 #

修改JavaScript部分即可解决问题：

import { LightningElement, api } from 'lwc';

export default class Marriott extends LightningElement {
    @api recordId; // 仅在需要编辑已有记录时保留该装饰器

    handleSubmit(event) {
        event.preventDefault();
        // 采用LWC官方推荐方式获取表单数据
        const formValues = { ...event.detail.fields };
        console.log('提交的表单数据:', formValues);
        
        // 调用LWC表单组件的reset方法重置表单
        this.template.querySelector('lightning-record-edit-form').reset();
    }
}

额外检查项 #

• 确认当前用户对Customer_Review__c对象及所有用到的评分字段有创建/编辑权限，权限不足也可能引发类似错误。
• 如果是新建记录，移除record-id={recordId}属性；如果是编辑记录，确保recordId已正确传入组件。

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