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 这样的流式库，但使用您已经知道的常用语法。这有多酷？

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

Svelte application bug: changing the contents of an array based on the value of a flag fails

javascript

svelte

svelte-3