Question

我正在将SveleteJS试驾并卡住

制作了一个Dashboard组件，并在该组件内部放置了一个Whiteboard组件：

<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'）}会执行on页面加载）？

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);
}

看起来有点愚蠢，但是有效！

精巧的＃每个不循环数据

1 个答案: