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(指出了这一点，并澄清了在任何对象上调用方法都是如此。

编辑：现在也在文档/教程中明确指出 - 请参阅"更新数组和对象">

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

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

跟：

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