Svelte问题：变量变更时#each循环未更新如何解决？

Svelte的响应式系统依赖直接赋值操作追踪变量变化，你遇到的问题大概率是对象属性的更新未被正确检测，或是请求环节存在隐性错误。以下是具体解决方案和排查要点：

方案1：拆分独立响应式日志变量 #

将日志数组从application对象中单独声明为响应式变量，直接赋值时Svelte能精准触发更新：

<script>
import axios from 'axios';
import { onMount } from 'svelte';

// 独立声明响应式日志变量
let logs = [];
let application = {
    Id: '你的应用ID' // 务必确保此处ID已正确赋值
};

function updateLogs() {
    axios.get(`http://localhost:5000/applications/${application.Id}/logs`)
        .then(response => {
            // 直接给logs赋值，触发响应式更新
            logs = response.data;
        })
        .catch(error => {
            console.log(error);
        });
}

// 组件挂载时首次调用日志更新
onMount(updateLogs);
// 如需实时刷新，可添加定时器：
// setInterval(updateLogs, 2000);
</script>

{#each logs as log}
    <p>{log}</p>
{/each}

方案2：保留对象结构的响应式写法 #

如果必须维持application对象的结构，可以通过重新赋值整个对象来触发Svelte的响应式检测：

<script>
import axios from 'axios';
import { onMount } from 'svelte';

let application = {
    Id: '你的应用ID',
    logs: []
};

function updateLogs() {
    axios.get(`http://localhost:5000/applications/${application.Id}/logs`)
        .then(response => {
            // 解构原对象并替换logs属性，重新赋值整个application
            application = {
                ...application,
                logs: response.data
            };
        })
        .catch(error => {
            console.log(error);
        });
}

onMount(updateLogs);
</script>

{#each application.logs as log}
    <p>{log}</p>
{/each}

关键排查项 #

• 打开浏览器控制台，检查请求是否成功，确认application.Id是否有效、请求URL是否正确
• 验证response.data是数组格式，而非对象或其他类型
• 若application是组件外部的全局变量，需通过Svelte的store实现全局响应式追踪

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