svelte - 使用 Svelte 更新商店中的数组时未定义

Question

我正在学习 Svelte 以及如何使用它制作自定义商店。我遇到了一个问题，当我尝试使用 update 更新可写数组时，它会在订阅该数组的组件中导致未定义的错误。

这是我的商店，我有一个简单的数组，其中包含一个元素，一个字符串:

import { writable } from 'svelte/store'

export const activeData = writable(["array"])

这是一个更新商店的组件。我只是将“推送”一词推送到 activeData 数组:

<script>
import {activeData} from './Store.js'

let handlePush = ()=>{
    activeData.update(val=>{val.push('pushed!')
    val = val
}
    )
}

</script>

<button
on:click={handlePush}>
push
</button>

然后在这个 app.svelte 组件中，我订阅了 activeData 并希望使用 Svelte 的 #each 指令打印 activeData 数组的元素:

<script>
    import {activeData} from './Store.js'
    import Push from './Push.svelte'
    

</script>

<div>
   {#each $activeData as datum}
    <p>{datum}</p>
    {/each}

    {@debug $activeData}
</div>

<Push/>

当我检查控制台的 activeData 时，我看到它通过添加“Push!”进行更新。到阵列。但是，然后我的 app.svelte 组件出现错误，提示“错误:{#each} 仅迭代类似数组的对象。”

因此更新数组后，数组不再是订阅它的组件的数组。

知道为什么会这样吗？

Answer 1

更新回调应该返回新值，在你返回undefined的情况下，尝试:

activeData.update(val => [...val, 'pushed!'])