React处理MongoDB统计数据 嵌套州对象合并求和实现问题

解决方案 #

你遇到的问题是直接用展开运算符合并states对象时，相同州名的属性会被后续值覆盖，不会累加内部的统计字段。你需要额外遍历states的每一项，对相同州名的views/mobile/desktop字段做求和处理即可。

以下是修改后的完整useEffect代码：

useEffect(() => {
    const analyticsFromDate = [];
    let analyticsForDisplay = [];
    for (var p in analytics.dates) {
      if (analytics.dates.hasOwnProperty(p)) {
        if (
          +new Date(p).setHours(0, 0, 0, 0) >=
            +new Date(state[0].startDate.setHours(0, 0, 0, 0)) &&
          +new Date(p).setHours(0, 0, 0, 0) <=
            +new Date(state[0].endDate.setHours(0, 0, 0, 0))
        ) {
          analyticsFromDate.push(analytics.dates[p]);
        }
      }
    }
    if (analyticsFromDate.length > 0) {
      analyticsForDisplay = Array.from(
        analyticsFromDate
          .flat()
          .reduce((acc, { views, desktop, mobile, states, ...r }) => {
            const key = JSON.stringify(r);
            const current = acc.get(key) || {
              ...r,
              views: 0,
              desktop: 0,
              mobile: 0,
              states: {},
            };
            // 新增states合并逻辑
            const mergedStates = {...current.states};
            Object.entries(states || {}).forEach(([stateName, stateData]) => {
              if (mergedStates[stateName]) {
                // 已存在同名州，累加数值
                mergedStates[stateName] = {
                  views: mergedStates[stateName].views + stateData.views,
                  mobile: mergedStates[stateName].mobile + stateData.mobile,
                  desktop: mergedStates[stateName].desktop + stateData.desktop
                }
              } else {
                // 不存在同名州，直接新增
                mergedStates[stateName] = {...stateData}
              }
            })
            return acc.set(key, {
              ...current,
              views: current.views + views,
              desktop: current.desktop + desktop,
              mobile: current.mobile + mobile,
              states: mergedStates,
            });
          }, new Map())
          .values()
      );
      setDisplayAnalytics(analyticsForDisplay);
    } else {
      setDisplayAnalytics([]);
    }
  }, [state, analytics]);

修改后输出的美国各州数据会自动按州名累加，完全符合预期效果。

内容的提问来源于stack exchange，提问作者iWBM