主页 / coding / 问题 / 79435340
Accepted
Manny
Asked: 2025-02-13 15:19:19 +0800 CST

无法访问 Svelte 中 Map 存储的值

  • 772

我有一个简单的存储new Map()，我喜欢在 Svelte 组件中对其进行迭代。在 {#each} 块中，我可以看到它迭代的次数与 Map 中的元素数一样多，但我看不到值。

<script>
    import {items} from "./store.js"

    $items.set("one", { name: "John", age: 50 })
    $items.set("two", { name: "Jack", age: 25 })
</script>

<h1>Hello!</h1>
{#each $items as item}
    <div>name: {item.name}</div>
{/each}

// store.js
import {writable, get} from "svelte/store"

export let items = writable(new Map())

游乐场。

javascript

1 个回答

  1. Best Answer

    如果你迭代Map你得到[key, value]对象，那么你需要：

    {#each $items as [key, value]}
    <div>name: {value.name}</div>
{/each}

    如果您只需要键或值，那么也有相应的函数keys()/ values()，因此对于给定的代码，您可以使用：

    {#each $items.values() as item}
    <div>name: {item.name}</div>
{/each}

    此外，Map不是反应式的，因此除非您手动触发商店，否则以后的修改将不会更新 UI。Svelte 5在 中有一个反应式版本Mapsvelte/reactivity。

    • 1

相关问题