当我更新数组内部的对象的属性然后作为组件的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
整个数组仅用于创建对象的新实例并将其推入似乎效率低下。还有其他方法吗?非常感谢!
答案 0 :(得分:0)
应该可以。这是一个工作示例。作为数组中一项属性的计数器按预期方式递增。
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