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

Question

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

产品.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>

产品.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 进行编程.

Answer 1

HTML 尝试首先加载(尽快向用户显示一些东西，任何东西。可能是一些占位符，可能是加载图标......)。这几乎是纯 html，你的 @wire还没有返回数据，所以你的 this.contact未定义。然而 HTML 如此调用 setter/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