javascript - Svelte:如果 block 条件更改后未评估 block 条件，则否则

Question

编辑:这是一个错误 https://github.com/sveltejs/svelte/pull/7043
考虑 the following example每当foo 时，就会期望在第二条水平规则下呈现“条形”。是 false和 bar[0]是 true .

<script>
    let foo = true
    let bar = [false];
</script>

<button on:click={() => foo = !foo}>
    Toggle foo
</button>
<button on:click={() => bar[0] = !bar[0]}>
    Toggle bar
</button>

<hr>
{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
<hr>

{#if foo}
    foo!
{:else if bar.every(x => x)}
    bar!
{/if}

但是，如果执行以下步骤， react 似乎会中断:

设置 foo至true

设置 bar[0]至true

设置 foo至false

即使 else if block 条件满足。如果 else if 条件只是 bar[0]，则不是这种情况。 ，所以似乎使用函数是它未被评估的原因。 bar 时的类似行为是 true之前 foo被切换和 false在 foo 之后再次切换，意外地“栏”呈现在底部。
在 foo 时可以观察到相同的效果。在 null 之间切换和 []与 else if条件为 Array.isArray(bar) .
这是一个错误还是我错过了什么？

Answer 1

当您更改 foo to true 时，它并不是真正的错误，它在您的场景中有点预期行为然后 bar to true现在栏已设置，更改时 foo to false再次bar didn't change如果你考虑它来触发 react !
解决方法是在任何值发生更改时自行触发它:

{#key foo || bar}
    {#if foo}
        foo!
    {:else if bar.every(x => x)}
        bar!
    {/if}
{/key}

这是一个有效的 repl