Salesforce、LWC、Lightning App Builder、无法读取属性

问题描述

我将组件创建为 Lightning Web 组件。在 VSCode 中没问题。 当我在 Lightning App Builder 中添加这个组件时，有一个 bug： “LWC 组件连接阶段出错：[无法读取未定义的属性‘字段’]”

product.html：

<template>
  <div class="container">
      <a onclick={productClick}>
        <div class="product">{name}</div>
      </a>
      <a onclick={addToCart}>
        <div class="product">Add to cart</div>
      </a>
  </div>
</template>

product.js：

import { LightningElement,api,wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
  'Account.Name','Account.Phone'
];

export default class Product extends LightningElement {
  @api item; // public property
  item = recordId;

  @wire(getRecord,{ recordId: '$recordId',fields: FIELDS })
  account;

  get name() {
    console.log('Returned value: ' + this.account.data.fields.Name.value);
    return this.account.data.fields.Name.value;
  }

  productClick() {

  }

  addToCart() {
    
  }
}

我使用 API v.51。它是根据this manual编程的。

解决方法

HTML 尝试首先加载（尽快向用户显示一些东西，任何东西。也许是一些占位符，也许是加载图标......）。这几乎是纯 html，您的 @wire 尚未返回数据，因此您的 this.contact 未定义。然而 HTML 会调用 getter，因此 null.fields 会导致错误。

尝试将 HTML 包装在 <template if:true> 中或在所有 getter 中编写类似 return this.account && this.account.data ? this.account.data.fields.Name.value : null;

请参阅 https://developer.salesforce.com/forums/?id=9062I000000QwLGQA0 中的最后一个答案，或者这也不错（但 @wire 的用法略有不同）：https://salesforce.stackexchange.com/questions/264669/how-to-avoid-error-cannot-read-property-of-undefined-using-two-lwc-wired-propert

,

这是编辑后的代码： 产品.html：

<template>
  <p>LWComponent</p>
  <template if:true={account}>
    <div class="container">
        <a onclick={productClick}>
          <div class="product">{name}</div>
          <!--<img class="product-img" src={product.fields.Picture_URL__c.value}></img>-->
        </a>
        <a onclick={addToCart}>
          <div class="product">Add to cart</div>
        </a>
    </div>
  </template>
</template>

product.js：

import { LightningElement,api,wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
  'Account.Name','Account.Phone'
];

export default class Product extends LightningElement {
  @api recordId;

  @wire(getRecord,{ recordId: '$recordId',fields: FIELDS })
  account;

  get name() {
    console.log("Yes,I'm here :)");
    if (this.account) {
      console.log('this.account: ' + JSON.stringify(this.account));
    } else {
      console.log("'this.account' does not exist.");
    }
    if (this.account.data) {
      console.log('this.account.data: ' + JSON.stringify(this.account.data));
    } else {
      console.log("'this.account.data' does not exist");
    }
    if (this.account.fields) {
      console.log('this.account.fields: ' + JSON.stringify(this.account.fields));
    } else {
      console.log("'this.account.fields' does not exist");
    }
    return this.account && this.account.data ? this.account.data.fields.Name.value : null;
    //return this.account.data.fields.Name.value;
  }
}

控制台列表：

Yes,I'm here :)
this.account: {}
'this.account.data' does not exist
'this.account.fields' does not exist

在帐户中什么都不是，我不明白为什么。

,

我添加了'@api recordId;' 和我编辑的文件 product.js-meta.xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>51.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightningCommunity__Default</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
      <property
        name="recordId"
        type="String"
        label="Record Id"
        description="Automatically bind the page's record id to the component variable"
        default="{!recordId}" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

结果是一样的。在对象 Account 中什么都不是。