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

应该可以。这是一个工作示例。作为数组中一项属性的计数器按预期方式递增。

App.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

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

1 个答案: