LWC中无法生成目标表格，请求技术修复方案

问题背景 #

我想要创建目标样式的表格，已通过Apex在JavaScript中获取到汇率数据，相关JS代码将数据处理后存入data数组，同时把data转为JSON字符串存入data2，但尝试使用data2渲染表格时未成功，以下是我的原始代码：

原始JS代码 #

@track data2 = [];
@track data = [];
testClick() {
    
    getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValue})
        .then(resultJSON => {
            let result = JSON.parse(resultJSON);
            
            console.log(result);
            console.log('////////');
            console.log(result.rates);

            let recordsByDates = result.rates;
            for (var key in recordsByDates) {
                console.log(key);
                let record = {
                    date : key,
                    USD : recordsByDates[key].USD,
                    CAD : recordsByDates[key].CAD,
                    EUR : recordsByDates[key].EUR,
                    GBP : recordsByDates[key].GBP
                }
                this.data.push(record);
                this.data2 = JSON.stringify(this.data);
            }

            console.log(this.data);
            console.log(this.data2);

        })
        .catch(error => {
            this.error = error;
            console.log(error);
        });        
}

原始模板代码 #

<template for:each={data2} for:item="dat">
    <tr key={dat} onclick={testClick}>
        <td data-label="data2">
            {dat.key}
        </td>
        <td data-label="data2">
            {dat.value}
        </td>
    </tr>
</template> 

错误原因 #

1. data2被赋值为JSON字符串，但LWC的for:each指令仅支持遍历数组对象，无法直接遍历字符串。
2. 模板中dat.key、dat.value的引用不符合record对象的结构（你的record包含date、USD、CAD等字段）。

修复方案 #

直接使用处理好的data数组（数组对象类型）渲染表格，无需转为JSON字符串。同时调整模板字段引用，匹配data数组的结构。

修改后的JS代码 #

@track data = [];
testClick() {
    getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValue})
        .then(resultJSON => {
            let result = JSON.parse(resultJSON);
            let recordsByDates = result.rates;
            // 清空旧数据，避免多次点击重复累加
            this.data = [];
            for (var key in recordsByDates) {
                let record = {
                    date : key,
                    USD : recordsByDates[key].USD,
                    CAD : recordsByDates[key].CAD,
                    EUR : recordsByDates[key].EUR,
                    GBP : recordsByDates[key].GBP
                }
                this.data.push(record);
            }
            console.log(this.data);
        })
        .catch(error => {
            this.error = error;
            console.log(error);
        });        
}

修改后的模板代码 #

<template for:each={data} for:item="rateItem">
    <tr key={rateItem.date} onclick={testClick}>
        <td data-label="日期">{rateItem.date}</td>
        <td data-label="USD">{rateItem.USD}</td>
        <td data-label="CAD">{rateItem.CAD}</td>
        <td data-label="EUR">{rateItem.EUR}</td>
        <td data-label="GBP">{rateItem.GBP}</td>
    </tr>
</template>

关键修改点 #

• 移除无用的data2变量，直接使用data数组进行遍历渲染。
• 循环前清空data数组，避免多次点击按钮导致数据重复。
• 模板中调整字段引用，匹配record对象的date、USD等字段，完善表格列展示。
• 使用唯一的rateItem.date作为key，符合LWC对key唯一性的要求。

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