Svelte 应用程序错误：根据标志的值更改数组的内容失败

Question

在一个小型 Svelte 应用程序中，我有这个空数组：var countries = []。如果满足条件，我想用第二个数组的成员（对象）“填充”这个空数组，如果条件不满足，或另一个：

<script>
    var checkedFlag = true;

    var countries = [];

    var countriesChecked = [
        {code : "AL", name: "Albania"},
        {code : "BE", name : "Belgium"},
        {code : "BG", name : "Bulgaria"},
    ];

    var countriesNotChecked = [{code : "RO", name : "Romania"}];
    
    function toggleChecked(){
        checkedFlag = !checkedFlag;
    }
    
    if (checkedFlag == true) {
        countries = countriesChecked;
    } else {
        countries = countriesNotChecked;
    }
    
    console.log(countries);
    
</script>

<input type="checkbox" on:change={toggleChecked} bind:checked={checkedFlag}> Countries checked: {checkedFlag}

我期待控制台显示：

{code : "AL", name: "Albania"},
{code : "BE", name : "Belgium"},
{code : "BG", name : "Bulgaria"}

当复选框被选中时，或

{code : "RO", name : "Romania"}

当复选框未被选中时。

然而，这并没有发生，这可以在 REPL 中看到。

我错过了什么？

Answer 1

<input type="checkbox" on:change={toggleChecked} bind:checked={checkedFlag}> 

您可能应该在处理事件或绑定变量之间做出选择。它们代表相同的状态转换/事件。同时拥有它们会使数据流更难以推理。

Svelte 在声明性代码中蓬勃发展，所以让我们选择绑定（而不是命令式事件）：

<input type="checkbox" bind:checked={checkedFlag}> 

现在我们需要让这个块反应：

    if (checkedFlag == true) {
        countries = countriesChecked;
    } else {
        countries = countriesNotChecked;
    }

目前，它在组件创建时运行一次。

我们添加一个响应式标签$:：

    $: if (checkedFlag == true) {
        countries = countriesChecked;
    } else {
        countries = countriesNotChecked;
    }

现在它不会在创建组件时运行，而是在创建组件之后，然后它会在它包含的任何变量（此处为：checkedFlag、countries 或 countriesChecked）发生更改时重新运行。

这样，内部状态就固定了，但我们仍然只有一个console.log。为什么？因为我们还需要让它反应：

    $: console.log(countries);

这个会随时countries更改重新运行。

这里。

响应式块以声明性和面向函数的风格描述异步数据流，很像 RxJS 等流库，但使用您已经知道的常用日常语法。这有多酷？