Svelte 存储：在 forEach 循环中更新的值不会动态更新（尽管仍然更改）答案

【问题标题】：Svelte store: values updated in forEach loop are not updated dynamically (still changed though)Svelte 存储：在 forEach 循环中更新的值不会动态更新（尽管仍然更改）
【发布时间】：2021-07-23 21:52:51
【问题描述】：

这里是最小的工作示例：

回复： https://svelte.dev/repl/ed0fb480159849458c2878d2210e9a40

代码：

App.svelte：

<script>
    import { array } from './store.js';
    import Child from './Child.svelte'
    
    
    function classicLoop() {
    for (let i=0;i<$array.length; i++) {
        $array[i].value ++
    }
    }
    
    function forEachLoop() {
    let i = 0
        $array.forEach(el => {
        el.value ++;
        console.log('loop element:',el);
        console.log('store element:',$array[i]);
        i++
    })
    }
</script>

<button on:click={classicLoop}>
    Classic loop
</button>
<button on:click={forEachLoop}>
    ForEach loop
</button>
<p>
    Items:
</p>
{#each $array as item}

<Child {item} />
{/each}

Child.svelte：

<script>
export let item;
</script>
<p>
    {item.id} -- {item.value}
</p>

store.js：

import { writable } from 'svelte/store';

export const array = writable([{id:'first',value:1},{id:'second',value:2},{id:'third',value:3}]);

问题：在 Svelte Store 中使用 Array.forEach 进行循环时，值会更新（确保记录到控制台），但动态绑定不起作用，并且更改在 DOM 中不可见（尽管值仍然在存储中更改）。经典循环工作正常。因此，在使用 forEach 之后，什么都看不到，但是使用经典循环将 DOM 更新为当前（正确的）值。

所以，我当然可能会坚持经典循环，但我想了解这里发生了什么，以及为什么:)

感谢任何评论/提示。

【问题讨论】：

标签： svelte svelte-3 svelte-store

【解决方案1】：

Svelte 的反应是triggered by assignment。在经典的 for 循环中，您直接分配给 $array[i].value，Svelte 会相应地更新 DOM。在forEach 中，您分配给中间变量el。 Svelte 不知道设置el 实际上是设置$array[i]，所以不会触发更新。

您可以在函数末尾添加一个赋值给$array，以强制 Svelte 更新。

function forEachLoop() {
    $array.forEach(el => {
        el.value ++;
    });
    $array = $array;
}

【讨论】：