Реакционная способность изменений свойств объекта внутри массива - PullRequest
Новая
       5

Реакционная способность изменений свойств объекта внутри массива

0 голосов
/ 26 февраля 2020

Как правильно активировать реактивность в 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 весь массив только для того, чтобы создать новый экземпляр объекта и добавить в него sh. Любой другой способ? Большое спасибо!

1 Ответ

0 голосов
/ 26 февраля 2020

должно работать. Вот рабочий пример. Счетчик, который является свойством элемента в массиве, увеличивается, как и ожидалось.

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>

И вот ответ: https://svelte.dev/repl/9c20112f09284ba983bf598012705c56?version=3.19.1

...