使用 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

更新回调应该 return 新值，在你的情况下你 returning undefined，尝试：

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

Answer 2

我就是这样完成的。我没有使用更新，而是直接访问存储值并在那里对其进行操作。

$activeData = [...$activeData, 'pushed!']

这解决了我的问题。我只是无法让它与更新方法一起工作。

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

Getting undefined when updating array in stores using Svelte

svelte