javascript - Svelte #each 不循环数据

Question

我正在试用 SveleteJS，但遇到了困难

制作了一个 Dashboard 组件，并在该组件内放置了一个白板组件:

<script>
    import Whiteboard from "./Whiteboard.svelte";
    export let name;
</script>

<div class="box part-of-dashboard">
    <Whiteboard lines={[]} />
</div>

Whitebord.svelte:

<script>
    export let lines = [];

    export function addLine() {
        lines.push("blah");
        console.log(lines);
    }

</script>

<div style="background-color:red">
    {#each lines as line}
        <div>
            {line}
        </div>
    {/each}
</div>
<div>
    <button on:click={addLine}>
        Add Line
    </button>
</div>

当我单击按钮时，console.log 触发，我可以看到行的大小增加，但我没有看到它在页面上呈现，只是空的红色 div 包装它。

我已经尝试将 $: 添加到各个地方，但我还不确定应该在哪里使用它以及不应该在哪里使用它，但这并不是说它有什么区别。

我如何让 #each 渲染 div 列表(还有，从 on:click 传递数据的正确方法是什么，执行 {addLine('blah') } 在页面加载时执行该 addLine)？

Answer 1

因此，这种情况与人们的预期背道而驰，但 Svelte 不会检测到 [].push() 改变数组变量的状态。这就是为什么控制台日志显示变量正在更新，但 Svelte 的渲染没有响应。

经过一番挖掘，我发现了几个线程( 1 、 2 )指出了这一点，并澄清了这对于在任何对象上调用方法都是正确的。

编辑:现在在文档/教程中也明确指出了这一点 - 请参阅 "Updating Arrays and Objects"

最简单的解决方案之一(根据链接的线程和文档)是简单地将变量值重新分配给自身； Svelte 将拾取该内容并重新渲染。因此，在您的场景中，为了让您的代码正常工作，我所要做的就是替换以下内容:

export function addLine() {
    lines.push("blah");
    console.log(lines);
}

与:

export function addLine() {
    lines.push("blah");
    lines = lines;
    console.log(lines);
}