1

我正在使用 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从

4

1 回答 1

5

因此，这种情况与人们的预期相反，但 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);
}
于 2019-10-07T03:34:04.067 回答