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

Question

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

在下面的代码中，第一个按钮确实有效地更改了 Purple 属性，因为对 update 的调用后面跟着一个 refresh ，它重置了父值。如果可能的话，我希望避免这种调用，而只使用可写作为父级和子级都理解并可以使用的接口(interface)。

此外，我不喜欢模板必须在每个模板上使用 map 来提取项目，获取商店的值(使用 svelte 内部调用 get_store_value )，但我不知道如何使用 {#each items as $items...} 否则(我不知道如何使用 $item 此处)。有没有更优雅的方式来获取值？

此外，这看起来确实很不幸，当我调用刷新并设置 const 变量时控制台不显示错误，这一事实似乎违反了 JS 规则但仍然可以编译。我知道 Svelte 正在后台注释此调用以对更改使用react，但这似乎是错误的。

这是在此 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}

Answer 1

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

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