Get Record Data — Practical Example

这一页Slide，我们来看一个实际的例子，告诉大家怎么在 Lightning Web Component 里面，用 `getRecord` 把联系人的数据完整地显示出来。这是一个很典型的模式，大家以后写组件的时候可以直接套用。 首先，在模板里我们用了 `lwc:if` 这个指令。为什么要用它呢？因为数据还没从服务器返回来时，`contact` 对象里面的 `data` 可能是 `undefined`，直接去读字段就会报错。用 `lwc:if` 判断一下，只有当 `contact.data` 有值的时候，才去渲染内容，这样不仅避免出错，还能顺便处理加载中和错误状态。 那数据取回来以后，怎么拿到字段的值呢？UI API 返回的记录数据，是嵌套在 `contact.data.fields.字段名.value` 这个路径下面的。比如联系人姓名，就是 `contact.data.fields.Name.value`。我们一般会给每个要用的字段，单独写一个 getter 方法，这样在模板里直接用 `{name}` 而不是那一长串路径，代码更干净。 接着，这个组件通常会被放在记录页面上，它怎么知道当前是哪个联系人的记录呢？靠的就是 `@api recordId`。在组件 JavaScript 里申明 `@api recordId`，Salesforce 平台会自动把页面上下文的记录 ID 传进来。再把这个 `recordId` 传给 `getRecord` 适配器，配置成 `$recordId`，注意前面有个美元符号，这样就变成了响应式属性。意思是，如果页面上的记录发生了切换，比如从联系人 A 跳到联系人 B，`recordId` 一变化，`getRecord` 就会自动重新请求新数据，不需要你手动干预。 为了代码更清晰，官方还推荐我们用 `getFieldValue` 这个工具方法，直接从记录对象里提取字段值。比你自己手动 `contact.data.fields.xxx.value` 这样一层层去点，包更健壮，也更容易理解。写法通常是 `getFieldValue(contact.data, CONTACT_FIELD)`，这里 `CONTACT_FIELD` 是 import 进来的字段引用，比如从 `@salesforce/schema/Contact.Name` 引入。 在显示联系人电话和电子邮件的时候，别直接用普通文本，可以用 Lightning 基础组件 `lightning-formatted-phone` 和 `lightning-formatted-email`。它们会自动根据用户的区域设置来格式化号码和邮件地址，甚至还能处理可点击的链接，用户体验更好。 最后，错误处理这块，我们通常会封装一个 `c-error-panel` 组件。它会接收 `contact.error`，用友好的方式把错误信息展示给用户，而不是让整个页面崩掉。这样整个显示联系人的模式就完整了：通过 `getRecord` 拿数据，用 `lwc:if` 做防御，`getFieldValue` 取值，格式化组件展示，错误面板兜底，`recordId` 自动关联当前记录。把这个模式记熟，开发记录相关的组件会又快又稳。