如何获取代理对象内容？

Question

我正在使用闪电网络组件和顶点类。这对我来说是新的。

我正在尝试获取由 Apex 类生成的Proxy 对象的内容。

但是当我控制台记录它时，我有这样的结果：

Proxy { <target>: {}, <handler>: {…} }

这是我的 LWC 组件：

Proxy { <target>: {}, <handler>: {…} }

顶点类：

import { LightningElement, track, wire } from "lwc";
import getAllActiveAccounts from "@salesforce/apex/AccountsController.getAllActiveAccounts";

export default class HelloWorld extends LightningElement {
  @wire(getAllActiveAccounts) accounts;

  @track foo;
  click() {
    console.log("Show Proxy object accounts ", this.accounts); // Show Proxy object
    console.log("Foo", this.accounts.name); // Show `undefined`
  }
}

Html 模板是一个显示console.log点击的按钮。

我想知道是否可以显示顶点类提供的名称？或者一种显示代理对象内容或可用键的方法。

Answer 1

要打印代理对象，请使用：

JSON.stringify(this.accounts)

要在某些功能上实际使用它，请使用以下命令：

let accounts = JSON.parse(JSON.stringify(this.accounts))
console.log(accounts.name) 

Answer 2

要获取可用的密钥，您可以在 Proxy 对象上使用Object.key& 。.data

对于您的情况，您可以通过以下方式获取密钥：

console.log(Object.keys(this.accounts.data[0]));

Answer 3

因此，您可以做的是执行 JSON.stringify()，而不是记录 Proxy 对象：

console.log("Show Proxy object accounts ", JSON.stringify(this.accounts)); 

另一个很棒的技巧是使用自定义开发格式化程序：https://dev.to/daveturissini/debug-lightning-web-components-lwc-track-and-api-properties-using-chrome-dev-tools-formatter-49c5

该博客还提供了很多好的建议：https://developer.salesforce.com/blogs/2019/02/debug-your-lightning-web-components.html