Lightning Web Component记录分类展示异常问题求助

核心错误点 #

• 数组添加方法错误：JS数组添加元素需用push()，append()是DOM元素的专属方法，数组并不支持，这直接导致你的CompletedTasks等三个数组始终为空。
• 数据遍历与访问路径错误：getRelatedListRecords返回的data对象中，真实记录数组是data.records，你之前循环时错误使用data.length；同时字段值需通过fields.字段名.value获取，而非直接record.Completion_Status__c。
• 未清空旧数据：每次wire回调触发时，未先清空三个任务数组，重复加载会导致数据累加混乱。

修复后的Timeline.js代码 #

import { LightningElement, api, wire, track } from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class timeline extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Tasks__r',
        fields: ['Task__c.Id','Task__c.Name', 'Task__c.Estimated_Completion_Date__c', 'Task__c.Completion_Status__c'],
        sortBy: ['Task__c.Estimated_Completion_Date__c'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;
            // 先清空旧数据，避免重复累加
            this.CompletedTasks = [];
            this.InProgressTasks = [];
            this.OverdueTasks = [];
            
            // 遍历正确的记录数组，按状态分类
            for (const record of this.records) {
                const status = record.fields.Completion_Status__c.value;
                if (status === "Completed") {
                    this.CompletedTasks.push(record);
                } else if (status === "In Progress") {
                    this.InProgressTasks.push(record);
                } else if (status === "Overdue") {
                    this.OverdueTasks.push(record);
                }
            }
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }
}

HTML代码优化建议 #

• 移除冗余的<template if:true={CompletedTasks}>判断：外层for:each={CompletedTasks}已经会在数组为空时不渲染内容，该判断完全多余。
• 修正拼写错误：将Esimated改为Estimated，保证文案准确性。

优化后的Timeline.html片段：

<lightning-tab label="All Tasks" value="All Tasks" title="All Tasks">
   <div style="overflow-x: scroll; height:130px;">
      <div class="tasks-container">
         <template for:each={CompletedTasks} for:item="rec">
            <div key={rec.fields.Id.value}>
               <div class="task-card">
                  <ul class="slds-has-dividers_around-space" draggable="true">
                     <li class="slds-item">
                        <article class="slds-tile slds-tile_board">
                           <h3 class="slds-tile__title slds-truncate" title="Journey Name">
                              <p style="font-weight: 600;">Web Development Onboarding</p>
                           </h3>
                           <div class="slds-tile__detail">
                              <div class="slds-text-heading_small">
                                 <a>
                                    {rec.fields.Name.value}
                                 </a>
                              </div>
                              <p class="slds-truncate" title="Estimated Completion Date:">Estimated Completion Date:</p>
                              <div class="statusdate">
                                 <p class="slds-truncate" title="Date" style="width: 200px;">{rec.fields.Estimated_Completion_Date__c.value}</p>
                                 <div class="statusbuttoncomplete">
                                    <span class="slds-badge slds-theme_success">{rec.fields.Completion_Status__c.value}</span>
                                 </div>
                              </div>
                           </div>
                        </article>
                     </li>
                  </ul>
               </div>
            </div>
         </template>
      </div>
   </div>
</lightning-tab>

额外优化建议 #

可以用数组filter方法简化分类逻辑，代码更简洁易读：

// 替代原for循环
this.CompletedTasks = this.records.filter(record => record.fields.Completion_Status__c.value === "Completed");
this.InProgressTasks = this.records.filter(record => record.fields.Completion_Status__c.value === "In Progress");
this.OverdueTasks = this.records.filter(record => record.fields.Completion_Status__c.value === "Overdue");

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