LWC使用lightning-record-form更新Account后刷新lightning-datatable咨询

问题根因&解决方案 #

你的代码存在3处核心错误，对应修改如下：

1. 表单事件绑定错误 #

lightning-record-form的onsubmit是提交前触发的事件，此时数据还未写入Salesforce后端，此时调用refreshApex拉取的还是旧缓存数据。你需要绑定保存成功后触发的onsuccess事件。
修改HTML表单代码：

<lightning-record-form
        object-api-name="Account"
        record-id="0015e00000F2JoWAAV"
        fields={fields}
        onsuccess={handleSubmit}
>
</lightning-record-form>

2. 表格key-field配置错误 #

你的lightning-datatable指定了key-field="pk"，但你处理后的账户数据里没有pk字段，只有Id字段，会导致数据更新后表格无法识别变化重渲染。
修改HTML表格代码：

<lightning-datatable 
        key-field="Id"
        data={cuentas}
        columns={columnas}
        onrowselection={action}
        hide-checkbox-column
        onrowaction={handleRow}
        default-sort-direction={defaultSortDirection}
        sorted-direction={sortDirection}
        sorted-by={sortedBy}
        onsort={onHandleSort}
>
</lightning-datatable>

3. 有线数据处理逻辑错误 #

你在wireCuentas回调中，每次拿到数据都是往已有cuentas数组追加内容，refreshApex触发后新数据会和旧数据叠加，无法正确更新。需要每次拿到新数据后重新生成数组，不要追加。
修改JS中的有线回调代码：

@wire(getCuentas)
wireCuentas(result) {
  this._wiredResult = result;
  if(result.data) {
    console.log('cuentas');
    console.log(result.data);
    // 先清空原有数据，再生成新数组
    this.cuentas = result.data.map((item, index) => {
      return {
        Id: item.Id,
        Name: item.Name,
        Phone: item.Phone,
        Boton: index + 1
      }
    });
    console.log('cuentas de nuevo');
    console.log(this.cuentas);
  } else if(result.error) {
    console.log('error cuentas');
    console.log(result.error);
  }
}

修改完成后，表单保存成功就会自动触发refreshApex拉取最新的账户列表，表格会同步渲染更新后的内容。

内容的提问来源于stack exchange，提问作者Gonzalo Castro