React状态下的合并对象

问题描述 投票:1回答:1

我正在实时接收新的数据点,并且我正在尝试使用react 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
})

特别是,使用传播算子方法时,我不清楚如何处理一组动态键-例如,上述更新中的新"line4"键。

我对数据的结构和我的React代码的结构都拥有完全的控制权,因此,如果有一种惯用的方式来实现相同的目标,我也很乐意听到。

reactjs react-hooks
1个回答
0
投票

0
投票
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; });
© www.soinside.com 2019 - 2024. All rights reserved.