使用 LWC 的自定义选择列表字段类型中的字段依赖关系实现，给出“[NoErrorObjectAvailable] 脚本错误”

问：

我们正在尝试使用 LWC 在自定义选择列表字段类型中实现字段依赖关系。为此，我创建了一个 LWC 组件来定义自定义闪电数据表。我正在使用依赖的自定义选择列表字段。从属字段为国家/地区和省/自治区/直辖市/自治区。更改国家/地区时，需要自动加载到自定义选择列表中的自动依赖状态。

为此，我从自定义选择列表方法中，通过传递更改的国家/地区值来生成一个自定义事件并将其发送到我的主组件。但是在加载组件时显示消息，onchange[NoErrorObjectAvailable] Script errorThis page has an error. You might just need to refresh it.

错误信息

[NoErrorObjectAvailable] Script error. newErrorHandler()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:67451:14 errorHandlerWrapper()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:67467:25 dispatchEvent()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:12804:25 LightningCombobox.dispatchEvent()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:6928:18 LightningCombobox.value [as dispatchEvent]()@https://static.lightning.force.com/ap24/auraFW/javascript/wyQWsVjjDIx-Xsqekbsbwg/aura_proddebug.js:6172:48 LightningCombobox.handleSelect()@https://milletechdatasoftsystempvtl-

错误屏幕

我添加了用于发送控制字段格式的.js代码，如下所示，

     @wire(getObjectInfo, { objectApiName: myRegObject })
    objectInfo;

      @wire(getPicklistValues, 
        {recordTypeId: "$objectInfo.data.defaultRecordTypeId",fieldApiName: countryField})
    wireCountryPickList({ error, data }) 
        {
          if (data) {
              this.countryOptions = data.values;
          } 
          else if (error) {
              console.log(error);
          }
      }

      @wire(getPicklistValues, 
        {
          recordTypeId: "$objectInfo.data.defaultRecordTypeId",
          fieldApiName: stateField,
          controllingFieldValue: '$data.country__c'
        })
    wireStatePickList({ error, data }) 
        {
          if (data) {
              this.allStateOptions = data.values;
             
          } 
          else if (error) {
              console.log(error);
          }
      }

    @wire(getRegDetails, { pickList: '$countryOptions' })
    result(result){
      
      let sRObj = JSON.parse(JSON.stringify(result));
      this.sDetails = sRObj.data;    
        try
          {
            this.sDetails.forEach(ele => {
              ele.countryOptionsList = this.countryOptions;
              ele.stateOptionsList = this.allStateOptions;
              })
          }
        catch(err) {
            console.log(err.message);
        }
    } 


     handleControllingChange(event) {

         const selectedCountry = event.detail.value;
         console.log(selectedCountry);     
         this.stateOptions = this.allStateOptions
                            .filter(option => option.validFor.includes(selectedCountry));

         this.sDetails.forEach(ele => {
          ele.stateOptionsList = this.stateOptions;
          })
      
      }

我正在同一个 .js 文件中定义自定义字段，就像 fllowing，

    const COLUMNS = [
    { 
      label : 'Country',
      fieldName: 'country__c',
      name : 'Country' ,
      placeholder : 'Choose Country',
      type: 'countryPicklist',
      typeAttributes: {
        value: { fieldName: 'country__c' },
        options: { fieldName: 'countryOptionsList' },
        },
      editable: true,
      context: { fieldName: 'Id' }
    },
    { 
      label : 'State',
      fieldName: 'state__c',
      name : 'State' ,
      placeholder : 'Choose State',
      type: 'statePicklist',
      typeAttributes: {
        value: { fieldName: 'state__c' },
        options: { fieldName: 'stateOptionsList' },
        },
      editable: true,
      context: { fieldName: 'Id' }
    },
    {
        type: 'button',
        typeAttributes: { label: 'Delete', name: 'delete' }
    }
    ]

我的自定义选择列表字段通过如下扩展创建，LightningDatatable

    import LightningDatatable from 'lightning/datatable';

    import countryPicklist from './countryPicklist.html';
    import countryPicklistEdit from './countryPicklistEdit.html';
    import statePicklist from './statePicklist.html';
    import statePicklistEdit from './statePicklistEdit.html';


    export default class CustomDataTable extends LightningDatatable {

    static customTypes = {
        
         countryPicklist: {
            template: countryPicklistEdit,
            editTemplate: countryPicklist,
            standardCellLayout: true,
            typeAttributes: ['options', 'value']
        },
        statePicklist: {
            template: statePicklistEdit,
            editTemplate: statePicklist,
            standardCellLayout: true,
            typeAttributes: ['options', 'value']
        }
    };
    handleCountryChange(event) {
       
         const selectedCountry = event.detail.value;
    console.log(selectedCountry);
    this.dispatchEvent(new CustomEvent('countrychange', {detail: selectedCountry}));
    }
    }

我用于选择列表自定义类型的字段模板，如下所示，countryPicklistEdit.html

       <template>
        <span class="slds-truncate" title={value}>{value}</span>
       </template>

countryPicklist.html,

      <template>
        <lightning-combobox 
        name='picklist' 
        label='Country'
        placeholder='Choose Country' 
        value={typeAttributes.value}
        options={typeAttributes.options}
        onchange={handleCountryChange}
        data-inputable="true"
        dropdown-alignment="auto"
        variant='label-hidden'>
       </lightning-combobox>
     </template>

我在我的主 html 文件中显示数据，如下所示，

    <template>
      <c-custom-data-table
         key-field="Id" 
         data={sDetails} 
         show-row-number-column 
         onsave={handleSave}
         oncountrychange={handleControllingChange}
         hide-checkbox-column 
         columns={columns}
         onrowaction={handleRowAction}>
       </c-custom-data-table>
    </template>

自定义对象定义已为国家/地区到州字段添加了字段依赖关系。由于自定义选择列表，这里出现问题。

故障排除方式 -

1. 在自定义组件.js文件中，通过将一个常量值保留到 selectedCountry 并通过创建自定义事件传递来交叉检查 event.detail 是否有任何问题。但不起作用。

2. 在创建自定义事件并将其从子事件发送到父事件时交叉检查了命名约定。

3. 测试了是否使用控制台.log语句简单测试消息。甚至没有打印。当国家/地区值更改为其他值时，会立即显示错误屏幕。

我在这里感觉到为自定义数据表定义的 onchange 方法的问题，同时将国家/地区值更改为不同的值。更改国家/地区值后立即显示错误页面。html 文件是我定义 onchange 方法的地方，它不是我的子组件的 html。其附加的html文件添加到同一目录中并导入us语句。import countryPicklist from './countryPicklist.html';

更新了控制台中的错误，

那么任何人都可以建议/指导解决这个问题吗？