Обновление определенного объекта в массиве

Question

Я пишу СПА в Свелте. Теперь я довольно плохо знаком с концепциями ES6, поэтому у меня возникают трудности с обдумыванием базовых концепций сома.

У меня есть магазин:

import { writable } from "svelte/store";

function selectedOptions() {
    const selection = writable([
        {
            id: 1,
            title: "Title 1",
            selections: []
        },
        {
            id: 2,
            title: "Title 2",
            selections: []
        },
        {
            id: 3,
            title: "Title 3",
            selections: []
        },
        {
            id: 4,
            title: "Title 4",
            selections: []
        },
        {
            id: 5,
            title: "Title 5",
            selections: []
        },
        {
            id: 6,
            title: "Title 6",
            selections: []
        }
    ]);

    return {
        subscribe: selection.subscribe,
        updateSelection: item => {
            selection.update((items) => {
                //I want to update the object with the same id as the object 
                //I'm passing in to the method.
           });
        };
    }
}
export default selectedOptions();

В моем компоненте я хочу'передать объект и обновить соответствующий объект в моем массиве с предоставленными значениями:

function handleChange(e) {
    selectedOptions.updateSelection({
        id: 1, title: "Title 1", selections: ["Option 1, Option 2"]
    });
}

Как "заменить" существующий объект новым, таким образом вызывая обновление всех компонентов, которые подписываютсяв магазин?

Answer 1

Используйте синтаксис распространения, чтобы скопировать все оригинальные ключи, затем добавьте тот, который вы хотите изменить:

selection.update(items => {
  return {
     ...items,
     [item.id]: item
  }
});

Answer 2

Вы можете использовать метод массива map и объединить новый и старый объект, если id соответствует, или просто вернуть старый объект как есть, если id не совпадает.

updateSelection: item => {
  selection.update(items => {
    return items.map(i => (i.id === item.id ? { ...i, ...item } : i));
  });
};