Svelte中#each循环如何在sorting数组变更时响应式更新

我为表格的表头和数据分别设置了独立数组，希望为表头（Headers数组）添加排序顺序图标，排序顺序单独存储在sorting数组中。现有代码如下：

HTML代码（Svelte模板） #

{#each data.Header as h, i}
    <th class="text-start" on:click={()=>headClick(i)}><Icon name={sortOrderIcon(i)}/> {h}</th>
{/each}

JavaScript代码 #

function headClick(i){
    let s=_.find(sorting, o => o.col===i)
    if (_.isUndefined(s)){ 
        sorting.push({col: i, sort: 'asc'})
        return
    }
    if (s[i].sort==='asc'){ 
        s[i].sort='desc'
    }
    else { 
        _.remove(sorting, (o)=>o.col===i)
    }
}

请问如何让Svelte在sorting数组变化时刷新该#each循环？

解决方案 #

Svelte的响应式更新依赖赋值操作检测变化，直接用push、_.remove或修改数组内对象属性的方式，Svelte可能无法感知到变化。可以通过以下方式修复：

1. 操作后手动触发响应式更新 #

对数组完成增删改操作后，将数组重新赋值给自身，强制Svelte检测变化：

function headClick(i){
    let s=_.find(sorting, o => o.col===i)
    if (_.isUndefined(s)){ 
        sorting.push({col: i, sort: 'asc'})
        sorting = [...sorting] // 触发更新
        return
    }
    // 注意：原代码错误，s是找到的单个对象，直接访问s.sort即可
    if (s.sort==='asc'){ 
        s.sort='desc'
        sorting = [...sorting] // 修改对象后触发更新
    }
    else { 
        _.remove(sorting, (o)=>o.col===i)
        sorting = [...sorting] // 删除元素后触发更新
    }
}

2. 用新数组替代原数组（推荐） #

每次操作都生成新数组，避免原地修改，Svelte能自动检测到变化，代码更清晰：

function headClick(i){
    const existing = sorting.find(o => o.col === i);
    if (!existing) {
        // 添加新排序规则
        sorting = [...sorting, { col: i, sort: 'asc' }];
    } else if (existing.sort === 'asc') {
        // 更新排序方向
        sorting = sorting.map(item => 
            item.col === i ? { ...item, sort: 'desc' } : item
        );
    } else {
        // 移除排序规则
        sorting = sorting.filter(item => item.col !== i);
    }
}

额外注意 #

确保sortOrderIcon(i)函数能根据sorting数组的当前状态正确返回对应图标名称，这样点击表头后图标才会同步更新。

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