如何在Svelte中基于传入prop循环遍历并初始化字典对象

问题原因 #

Svelte的响应式更新只会检测变量本身的赋值操作，你直接修改map对象的内部属性，没有触发map本身的赋值，所以框架无法检测到变化，会看起来代码没有生效。

正确实现方案 #

每次max变化时直接生成新的对象再赋值给map，自动触发响应式更新，示例代码如下：

<script>
    export let max;
    let map = {};
    $: if (max !== undefined) {
        // 生成全新对象替换原有map
        const newMap = {};
        for (let i = 0; i < max; i++) {
            newMap[`id_${i}`] = i < 5 ? 1 : -1;
        }
        map = newMap;
    }
</script>

<p>{max}</p>
<!-- 可自行添加代码展示map内容验证效果 -->
{#each Object.entries(map) as [key, val]}
    <div>{key}: {val}</div>
{/each}

替代方案 #

如果你确实需要修改原有对象而非生成新对象，只需要在循环结束后手动加一行赋值触发响应式即可：

$: if(max != undefined){
  for(var i=0; i<max; i++){
    if(i<5) {
      map["id_"+i] = 1;
    }
    else {
      map["id_"+i] = -1;
    }
  }
  // 手动触发响应式更新
  map = map
}

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