为什么我的 svelte {#each} 块没有反应性？

Question

所以基本上我正在使用 Svelte 尝试启动一个快速应用程序，该应用程序的细节并不重要，但基本上它托管了一堆嵌入式网站。请参阅此处的示例并了解可复制性：

https://svelte.dev/repl/6f3484554ef8489b9a5960487a0a1f95?version=3.47.0

我的问题是，当我向站点列表添加新的 url 和标题时，{#each}创建嵌入视图的块不会更新以反映列表的新状态，即使列表在控制台输出中明显更新。这是否与范围有关，或者是不触发组件重新分配 prop 的反应性的 Svelte 问题？

更新：某些网站不允许嵌入，因此请使用https://wikipedia.org作为安全测试网站。

---

如果你用 wiki 地址替换站点列表中的硬编码 URL，它应该可以正常工作。{#each}我基本上希望在块创建新SiteView组件时弹出一个新窗口

Answer 1

您的代码有几个问题，首先是您没有将对数组所做的更改传播sites回主应用程序，您应该使用它bind:来保持两个数组同步。

<InputBar bind:sites {site} />

第二个是，您在添加新站点时修改一个对象，然后将该对象添加到数组中，这将始终是同一对象，因此如果您更改它，之前添加的站点也会更改。您可以通过将新对象传播到数组中来解决此问题：

function add() { sites = sites.concat({...site}); console.log(sites)}
// or alternatively
function add() { sites = [...sites, {...site}]; console.log(sites); }

也就是说，该应用程序并不是非常“精简”，因为它混合了职责并将数据公开给不需要该数据的组件。例如，为什么输入栏需要了解当前站点？如果输入栏只是一个输入栏，那就更好了。当用户单击“添加”时，它会引发一个事件，提示“已添加某些内容”并重置字段。然后父级负责将其添加到数组中。这将提供更灵活的解决方案。如果你这样做，你会发现没有理由在顶层有一个“site”变量（或者甚至根本没有那个对象，你可以只有两个字段）

<script>
    import { createEventDispatcher } from 'svelte'
    let url = ''
    let title = ''
    const dispatch = createEventDispatcher()
    function add() {
        dispatch('add', { url, title })
        url = ''
        title = ''
    }
</script>
<div class="rounded">
    <p>Enter a site to stream:</p>
    <input type="text"  placeholder="www.example.com" bind:value={url}>
    <br>
    <input type="text" placeholder="example" bind:value={title}>
    <button on:click={add}>add</button>
</div>

<InputBar on:add={(ev) => sites = [...sites, ev.detail]} />

最后一点，要将内容添加到 html 的头部，请使用<svelte:head>.