Svelte中fetch POST返回对象后模板渲染失败问题求助

问题背景 #

调用API接口时，在getCurrentData函数中返回data[170]，并尝试在Svelte模板中显示currentData[101]和currentData[102]，但渲染失败；若直接返回data[170][101]，模板中仅用{currentData}就能正常显示。已确认请求体为JSON格式，问题仍存在。

相关代码 #

业务逻辑代码 #

currentDataPromise = getCurrentData(request1, request2);

async function getCurrentData(request1, request2) {
        const response = await fetch(url, {
            method: "POST",
            
            body: JSON.stringify({
                "801": {
                    "170": null
                }
            }),
            
            headers: {
                "Content-Type": "application/json; charset=utf-8",
                // 其他请求头
            }
        });
        const json = await response.json();
        const data = json[801];

        if (data) {
            console.log(data[170]); // 数据结构参考截图
            return data[170];
        } else {
            throw new Error("No data available...");
        }
    };

Svelte模板代码 #

{#await currentDataPromise}
     <p>Loading...</p>
{:then currentData}
    <p class="value">{currentData[101]} and {currentData[102]}</p>
{:catch error}
    <p class="error">{error.message}</p>
{/await}

问题原因及解决方法 #

核心原因：键类型不匹配 #

你在模板中使用数字101、102作为索引，但API返回的data[170]中的键实际是字符串类型（如"101"、"102"）。JavaScript在单独访问data[170][101]时会自动将数字转为字符串匹配键，但Svelte模板渲染时对这种类型不匹配的访问更为敏感，从而触发渲染失败。

解决方法 #

方法1：模板中使用字符串键访问

修改模板代码，明确用字符串键取值：

{#await currentDataPromise}
     <p>Loading...</p>
{:then currentData}
    <p class="value">{currentData["101"]} and {currentData["102"]}</p>
{:catch error}
    <p class="error">{error.message}</p>
{/await}

方法2：提前在函数中处理数据结构

在getCurrentData函数中直接提取所需字段，避免模板处理类型问题：

async function getCurrentData(request1, request2) {
    // ... 原有请求及解析代码 ...
    if (data) {
        const target = data[170];
        return {
            val101: target["101"],
            val102: target["102"]
        };
    } else {
        throw new Error("No data available...");
    }
}

模板中直接访问属性：

<p class="value">{currentData.val101} and {currentData.val102}</p>

方法3：确认数据类型细节

在console.log中补充打印数据类型和键信息，进一步验证：

console.log(typeof data[170]); // 确认是对象还是数组
console.log(Object.keys(data[170])); // 查看键的实际格式（字符串/数字）

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