javascript - 数组内对象的属性更改的 react 性

Question

当我更新数组内对象的属性然后作为组件的 Prop 传递时，在 svelte 中触发 react 性的正确方法是什么？

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大批。这工作得很好，但没有触发 react 性(我假设是因为 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