Svelte中删除数组对象后如何重新渲染视图？

嘿，作为Svelte新手碰到这个问题太正常啦！我来帮你理清楚问题出在哪，以及怎么快速解决～

问题根源 #

Svelte的响应式系统是通过赋值操作来追踪数据变化的。你用splice修改数组时，只是在原数组上做了原地修改，数组的引用没有发生变化，所以Svelte没法检测到这个改动，自然不会更新视图。

解决方案1：手动触发响应式更新 #

在splice修改数组后，把数组重新赋值给自己，这样就能触发Svelte的响应式检测了：

function deleteCountry(){
    let ccode = this.getAttribute('data-code');
    let itemIdx = countries.findIndex(x => x.code == ccode);
    countries.splice(itemIdx,1);
    // 关键：重新赋值触发视图更新
    countries = countries;
    console.log(countries);
}

解决方案2：生成新数组（更推荐的Svelte风格） #

用数组的filter方法直接生成一个不包含要删除元素的新数组，然后赋值给countries——这种方式不需要额外步骤，Svelte会自动检测到数组引用变化并更新视图：

function deleteCountry(){
    let ccode = this.getAttribute('data-code');
    // 用filter创建新数组并赋值
    countries = countries.filter(x => x.code !== ccode);
    console.log(countries);
}

额外优化：简化事件处理 #

其实你还可以不用data-code属性，直接在点击事件里传递参数，代码会更简洁：

把按钮的代码改成：

<button on:click={() => deleteCountry(c.code)} class="btn btn-sm btn-danger">Delete</button>

然后更新删除函数：

function deleteCountry(ccode){
    countries = countries.filter(x => x.code !== ccode);
    console.log(countries);
}

这样就不用操作DOM去获取data-code的值了，更符合Svelte的组件化思维～

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