用于显示 JSON 字符串的 Lightning Web 组件不起作用答案

【问题标题】：Lightning Web Component to display JSON String is not working用于显示 JSON 字符串的 Lightning Web 组件不起作用
【发布时间】：2019-03-13 05:37:04
【问题描述】：

我有以下闪电网络组件来读取 JSON 字符串并将它们显示在联系人记录详细信息页面中。请注意，我是照明 Web 组件的新手，并且在学习方面付出了相当大的努力。

我的组件.html

<template>
  <lightning-record-form
        object-api-name={contactObject}
        fields={myFields}
        onsuccess={handleContactCreated} onload={handleContactInitialized} >
  </lightning-record-form>
</template>

MyComponent.js

 import { LightningElement, wire, track } from 'lwc';
 import findDetails from 
        '@salesforce/apex/JSONDemoController.getContactWithRelatedDataById';
 import CONTACT_OBJECT from '@salesforce/schema/Contact';
 import NAME_FIELD from '@salesforce/schema/Contact.Name';
 import TEST_FIELD from '@salesforce/schema/Contact.TestField__c';
 import SPOUSE_FIELD from '@salesforce/apex/ResponseJSONWrapper.spouse';
 import ADDRESS_FIELD from 
    '@salesforce/apex/ResponseJSONWrapper.mailingAddress';


export default class ContactCreator extends LightningElement {

contactObject = CONTACT_OBJECT;

myFields = [SPOUSE_FIELD,ADDRESS_FIELD];
@track contacts;
@track error;

handleContactCreated(){
    // Run code when account is created.
}

handleContactInitialized(){
  findDetails()
      .then(result => {
          var responseObj = JSON.parse(result.getReturnValue());
          this.SPOUSE_FIELD = responseObj.spouse;
          this.ADDRESS_FIELD = responseObj.mailingAddress;
      })
      .catch(error => {
          this.error = error;
      });
      myFields = [SPOUSE_FIELD,ADDRESS_FIELD];
    }
 }

JSONDemoController.cls

public class JSONDemoController {
   @AuraEnabled
   public static String getContactWithRelatedDataById() {

    String response = '';
    ResponseJSONWrapper wrapper = new ResponseJSONWrapper();
    wrapper.spouse = 'Test Spouse';
    wrapper.mailingAddress = 'Test Address';
    response = JSON.serialize(wrapper);
    return response;
}

}

ResponseJSONWrapper.cls

  public with sharing class ResponseJSONWrapper {
     public String spouse;
     public String contactRecordType;
     public Date birthDate;
     public String mobile;
     public String mailingAddress;
     public String otherAddress;
     public String languages;
     public String level;
     public String Description;
}

但是当它被渲染时，我没有得到我在闪电组件中硬编码的值。什么都没有，它是空的。有人可以帮忙指出我哪里出错了吗？

【问题讨论】：

标签： javascript salesforce web-component lightning

【解决方案1】：

改变这一行：

var responseObj = JSON.parse(result.getReturnValue());

收件人：

var responseObj = JSON.parse(result);

getReturnValue() 用于 Aura 组件。

【讨论】：

【解决方案2】：

您实际上不需要在 apex 中序列化包装器，然后在组件中显式解析，框架自己完成这项工作！

public class JSONDemoController {
   @AuraEnabled   //change return type to ResponseJSONWrapper 
   public static ResponseJSONWrapper getContactWithRelatedDataById() {

    String response = '';
    ResponseJSONWrapper wrapper = new ResponseJSONWrapper();
    wrapper.spouse = 'Test Spouse';
    wrapper.mailingAddress = 'Test Address';
    return wrapper;   //return the wrapper itself
}

在 .js 文件中

findDetails()
  .then(result => {
      var responseObj = result;
      ...
  })

这样代码不会被不需要的代码弄得乱七八糟:)

【讨论】：