合并处于反应状态的对象

Question

我正在实时接收新的数据点，我正在尝试使用 reactuseState钩子来更新我的数据。可能有几十万个点，所以更新需要高效。我的状态结构大致如下所示：

{
"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"键。

我可以完全控制数据的结构和反应代码的结构，所以如果有更惯用的方式来实现相同的目标，我也很乐意听到。

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

扩展运算符是更新对象或数组的最佳方式。ECMA 脚本 2015 及更高版本中的新功能之一。