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

【问题标题】：Getting undefined when updating array in stores using Svelte使用 Svelte 更新商店中的数组时未定义
【发布时间】：2021-01-21 21:37:58
【问题描述】：

我正在学习 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 时，我看到它通过添加“推送！”来更新到数组。但是，然后我的 app.svelte 组件中出现错误，提示“错误：{#each} 仅迭代类似数组的对象。”

所以更新数组后，数组就不再是订阅它的组件的数组了。

知道为什么会这样吗？

【问题讨论】：

标签： svelte

【解决方案1】：

更新回调应该返回新值，如果你返回undefined，试试：

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

【讨论】：

【解决方案2】：

这就是我最终做到的方式。我没有使用更新，而是直接访问了存储值并在那里对其进行了操作。

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

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

【讨论】：