数组内对象的属性更改的反应性

Question

当我更新数组内部对象的属性（然后作为组件的 prop 传递）时，触发 svelte 反应性的正确方法是什么？

let items = [{
   id: 1,
   name: 'first'
}, {
   id: 2,
   name: 'second'
}];

function findItem(id) {
   return items.find(item => item.id == id);
}

function modifyItem(id, changedProps) {
   let item = findItem(id);
   if(item) {
     Object.assign(item, changedProps);
     items = [...items]; // this does nothing
     console.log(items); // correctly displays the modified items array
  }
}

// ...

<MyList {items}/>

所以我正在传递我的modifyItem功能。然后子组件调用它并想要更新items数组。这工作得很好，但是反应性没有被触发（我假设因为 svelte 无法识别数组中的对象已被修改），所以MyList永远不会重新渲染。

这样做的“正确”/“正确”方法是什么？.map仅仅创建对象的新实例并将其推入，对于整个数组来说似乎有点低效。还有其他方法吗？多谢！

Answer 1

它应该有效。这是一个工作示例。作为数组中项目的属性的计数器按预期递增。

应用程序.svelte：

<script>
    import DisplayCounter from "./DisplayCounter.svelte";
    let items = [{text: 'hello', count: 0}];

    function incrementCounter() {
      items[0].count++;
      items = [...items];
  }
</script>

<button on:click={incrementCounter}>Click me</button>
<DisplayCounter {items} />

DisplayCounter.svelte：

<script>
    export let items = []
</script>

<div>{items[0].count}</div>

这是 REPL：https://svelte.dev/repl/9c20112f09284ba983bf598012705c56 ?version=3.19.1