javascript - 为什么可写数组不能正确更新Svelte组件内部的值？

我有一个父模板（App.svelte），它创建可写数组并将其传递给组件（RedOrBlueOrPurple.svelte）。组件遍历项目。我想传递一个可写数组（而不是创建一个包含整个对象数组的单个可写数组），因为我想在项目内部发生变化时分别在每个项目上添加subscribe处理程序。否则，我的订阅处理程序将需要找出更改了哪个项目，这似乎需要更多工作。

在下面的这段代码中，第一个按钮确实有效地更改了Purple属性，因为对update的调用之后是refresh，用于重置父级值。我希望尽可能避免使用此调用，而只是将可写用作父母和孩子都能理解并可以使用的接口。

另外，我不喜欢模板必须在每个模板上都使用map来拉出商品，获取商店的价值（使用苗条的内部调用get_store_value），但是我不知道该怎么做否则将使用{#each items as $items...}（我在这里无法弄清楚如何使用$item）。有没有更优雅的方式获得价值？

另外，这似乎真的很不幸，我调用刷新并设置const变量时控制台没有显示错误，这一事实似乎破坏了JS规则并且仍然可以编译。我知道斯维尔特（Svelte）会在引擎盖下注释此调用以对更改做出反应，但这似乎是错误的。

这是此REPL的位置：https://svelte.dev/repl/84fbae4358494844a79a7f119b084f01?version=3.19.2

<script>
    import { writable } from 'svelte/store';
    import RedOrBlueOrPurple from './RedOrBlueOrPurple.svelte';

    const items = [];
    items.push( writable( { blue: true }));
    items.push( writable( { blue: false, red: true }));
    items.push( writable( { blue: true, red: true }));

const refresh = () => {
    items = items;
};

</script>

<RedOrBlueOrPurple {refresh} {items}/>

<script>
    import { get_store_value } from 'svelte/internal';
    export let items;
    export let refresh;

    const purple = (item, callRefresh) => {
        item.update( i => {
            i.purple = true;
            return i;
        });
        // We only call this for the first button, and if we don't,
        // the items aren't updated, even though we do call update on
        // the store correctly.
        if (callRefresh) {
            refresh();
        }
    };
</script>

{#each items.map( item => ({ item, value: get_store_value(item) })) as { item, value}, index }

<h1>
    Item : { index }
</h1>

<div>
RED: { value.red ? "Red" : "Not red"}
</div>
<div>
BLUE: { value.blue ? "Blue" : "Not blue"}
</div>

<div>
PURPLE: { value.purple ? "Purple" : "Not purple"}
</div>

<button on:click={ () => { purple(item, index === 0) } }>Change to purple</button>

{/each}

最佳答案

在您的情况下，仅当svelte检测到您在items中使用的对#each的分配时，才触发屏幕更新。仅更新数组的任何项目是不够的。您可以像这样简单地解决它：

const purple = (item, callRefresh) => {
    item.update( i => {
        i.purple = true;
        return i;
    });
    items = items;  // instead of using the callback, simple reassign items here
};

关于javascript - 为什么可写数组不能正确更新Svelte组件内部的值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60573066/