Javascript: распространять массив объекта в объекте и изменять свойства только внутри него

При распространении объекта с вложенными свойствами с целью обновления конкретных свойств подумайте об этом в два этапа:

1. Разверните исходный объект, чтобы скопировать его (...)
2. Переопределить новые значения свойств после объекта распространения

В вашем примере мы делаем следующее:

• Дублирование defaultData и назначение обновленного свойства books (будет определено на следующем шаге)
• Дублирование первой книги (defaultData.books[0]) и присвоение ей обновленного свойства panelsCollected. Затем перезапишите существующее свойство books этим обновленным элементом массива.

Результат выглядит следующим образом:

const defaultData = {
  title: "Title",
  subtitle: "Subtitle",
  books: [
    {
      bookId: "1",
      imageSrc:
        "any.png",
      name: "Issue",
      userOwnsData: true,
      panelsCollected: 0,
      totalPanels: 123,
      link: "https://google.com",
    },
  ],
  bgColor: "black",
};

const newBook = {
  ...defaultData,
  books: [
    {
      ...defaultData.books[0],
      panelsCollected: 123
    }
  ]
}

console.info(newBook)
/*
{
  title: "Title",
  subtitle: "Subtitle",
  books: [
    {
      bookId: "1",
      imageSrc:
        "any.png",
      name: "Issue",
      userOwnsData: true,
      panelsCollected: 123,
      totalPanels: 123,
      link: "https://google.com",
    },
  ],
  bgColor: "black",
};
*/

Если, например, свойство books имеет длину 1000 элементов, вместо этого вам нужно будет найти конкретную книгу в вашем массиве с помощью метода массива (например, find / findIndex) и обновить его, например.

const bookToUpdateIndex = defaultData.books.findIndex(book => book.bookId === '1')

const updatedBooks = [...defaultData.books]
updatedBooks[bookToUpdateIndex] = {
  ...updatedBooks[bookToUpdateIndex],
  panelsCollected: 123
}

const newBook = {
  ...defaultData,
  books: updatedBooks
}

Вместо использования find и синтаксиса расширения альтернативный подход (но не обязательно самый эффективный) может состоять в том, чтобы скопировать объект, преобразовав его в строку, а затем повторно проанализировав эту строку. И тогда вы можете просто обновить объект по нужному вам индексу.

const defaultData = {title:"Title",subtitle:"Subtitle",books:[{bookId:"1",imageSrc:"any.png",name:"Issue",userOwnsData:!0,panelsCollected:0,totalPanels:123,link:"https://google.com"}],bgColor:"black"};

const copy = JSON.parse(JSON.stringify(defaultData));
copy.books[0].panelsCollected = 123;

console.info(defaultData);
console.info(copy);