Слияние объектов в состоянии реакции

Question

Я получаю новые точки данных в режиме реального времени, и я пытаюсь использовать ловушку реагирования useState для обновления моих данных. Может быть несколько сотен тысяч очков, поэтому обновления должны быть эффективными. Структура моего состояния выглядит примерно так:

{
  "graph1": {
    "line1": [[x1, y1], [x2, y2],..., [x100, y100]],
    "line2": [[x1, y1], [x2, y2],..., [x200, y200]],
    "line3": [[x1, y1], [x2, y2],..., [x900, y900]]
  },
  "graph2": {
    "line1": [[x1, y1], [x2, y2],..., [x100, y100]],
    "line2": [[x1, y1], [x2, y2],..., [x200, y200]]
  }
}

Где xi, yi - просто числа с плавающей запятой. Я получаю обновления в аналогичном формате, например:

{
  "graph1": {
    "line1": [[x101, y101]],
    "line3": [[x901, y901], [x902, y902]],
    "line4": [[x1, y1]],
  },
  "graph2": {
    "line1": [[x101, y101]],
  }
}

И я хотел бы обновить свое состояние, чтобы оно выглядело так:

{
  "graph1": {
    "line1": [[x1, y1], [x2, y2],..., [x101, y101]],
    "line2": [[x1, y1], [x2, y2],..., [x200, y200]],
    "line3": [[x1, y1], [x2, y2],..., [x902, y902]],
    "line4": [[x1, y1]]
  },
  "graph2": {
    "line1": [[x1, y1], [x2, y2],..., [x101, y101]],
    "line2": [[x1, y1], [x2, y2],...,  [x200, y200]]
  }
}

Есть ли более простой способ сделать это, чем с беспорядком операторов распространения? т. е.

setGraphs(xs => ({
  ...xs,
  "graph1": {
    ...xs.graph1,
    "line1": [...xs.graph1.line1, ...new_data.graph1.line1],
    // etc
})

В частности, с использованием подхода оператора распространения, мне неясно, как обрабатывать динамический набор ключей c - например, новый ключ "line4" в обновлении выше.

У меня есть полный контроль над структурой данных и структурой моего кода реагирования, поэтому, если есть более идиоматический способ достижения той же цели, мне бы тоже хотелось это услышать.

Answer 1

Вы можете восстановить состояние и сбросить его. Ваше решение работает только тогда, когда вы знаете все возможные ключи, но в противном случае нам нужно объединить их путем итерации. Как это:

setGraph(graph => {
  Object.keys(newData).forEach(g => {
    Object.keys(newData[g]).forEach(l => {
      if (graph[g][l]) {
        graph[g][l] = [...graph[g][l], ...newData[g][l]);
      } else {
        graph[g][l] = newData[g][l];
      }
    });
  });
  return graph;
});

Answer 2

Оператор Spread - лучший способ обновления объектов или массивов. Одна из новых функций в ECMA Script 2015 и выше.