Aura递归方法迁移至LWC后输出不一致问题排查

• 迁移Aura递归方法formatNestedMetadata至LWC后，输出结果与原版本不一致
• 递归执行前的data日志与Aura版本完全匹配，但递归过程中cur对象的日志在LWC中仅输出1条，Aura中输出多条，要求两者日志完全一致
• 怀疑原递归逻辑存在过度设计，尝试过用点语法遍历嵌套对象取值，但核心的输出差异问题仍未解决

附代码与日志截图 #

Aura 实现代码 #

// Aura版本的formatNestedMetadata递归方法
({
    formatNestedMetadata: function(component, event, helper) {
        let data = component.get("v.metadataData");
        console.log('Aura pre-recursion data:', JSON.stringify(data));
        helper.recursiveFormat(data);
    }
})

// 助手类中的递归方法
({
    recursiveFormat: function(data) {
        for(let i = 0; i < data.length; i++) {
            let cur = data[i];
            console.log('Aura cur:', JSON.stringify(cur));
            // 处理cur的逻辑
            if(cur.children && cur.children.length > 0) {
                this.recursiveFormat(cur.children);
            }
        }
    }
})

LWC 实现代码 #

// LWC版本的formatNestedMetadata递归方法
import { LightningElement, api } from 'lwc';

export default class MetadataFormatter extends LightningElement {
    @api metadataData;

    connectedCallback() {
        let data = [...this.metadataData];
        console.log('LWC pre-recursion data:', JSON.stringify(data));
        this.recursiveFormat(data);
    }

    recursiveFormat(data) {
        for(let i = 0; i < data.length; i++) {
            let cur = data[i];
            console.log('LWC cur:', cur);
            // 处理cur的逻辑
            if(cur.children && cur.children.length > 0) {
                this.recursiveFormat(cur.children);
            }
        }
    }
}

Aura 递归日志截图 #

LWC 递归日志截图 #

核心差异原因排查 #

1. 引用类型与日志输出特性
   LWC中console.log(cur)输出的是对象引用，后续修改会导致日志面板中显示的内容被更新，看起来只输出一条。改成console.log('LWC cur:', JSON.stringify(cur))，序列化后输出当前递归步骤的真实快照，和Aura的日志格式对齐。
2. 对象赋值的引用问题
   检查LWC中是否直接复用了原对象引用，比如let cur = data[i]后修改了cur的属性，导致后续递归的对象被篡改。如果需要独立副本，用深拷贝：let cur = JSON.parse(JSON.stringify(data[i]))。
3. 递归终止条件的细微差异
   对比Aura和LWC代码中的if(cur.children && cur.children.length > 0)判断，确认LWC中是否存在children为undefined或null的处理差异，比如Aura可能自动处理空值，LWC需要显式判断。
4. 变量作用域问题
   确保cur是在循环内部每次迭代时重新声明的，避免因作用域提升导致的变量复用。

递归逻辑优化建议 #

针对原递归的过度设计问题，可替换为迭代式遍历，更易调试且避免递归栈限制：

// 迭代式深度优先遍历替代递归
formatNestedMetadata(data) {
    const stack = [...data];
    while (stack.length > 0) {
        const cur = stack.pop();
        console.log('cur:', JSON.stringify(cur));
        // 处理cur的逻辑
        if (cur.children && Array.isArray(cur.children)) {
            // reverse保持和递归一致的遍历顺序（从左到右）
            stack.push(...cur.children.reverse());
        }
    }
}

如果嵌套层级固定，直接用点语法逐层访问即可，无需遍历：

// 固定层级取值示例
const value = data[0].children[0].targetField;

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