React中如何对比二维数组子项前缀并拼接对应值生成目标数组

问题原因 #

• React状态更新是异步批量执行的，你在循环中反复调用setArrayData时，每次拿到的arrayData都是循环开始前的旧值，导致后一次更新直接覆盖前一次的结果，最终只会保留最后一次生成的条目。
• 两层全量遍历dataValues没有排除自己和自己对比的情况，也没有过滤重复的配对（比如[item1,item2]和[item2,item1]会被判定为两次匹配），产生大量无效逻辑。
• 索引计算错误，遍历slice结果时i从0开始，你使用i-1取值会出现索引为-1的异常情况，同时slice的结束位置多加了1，导致遍历次数异常。

解决方案 #

先按子元素的开头部分分组，把相同开头的条目放在同一组中，再对每组内的条目配对，最后遍历select数组生成目标格式的条目，计算完最终结果后一次性更新状态即可。

修改后的代码如下：

const chartValues = () => {
  // 按子元素的开头分组
  const groupMap = {}
  dataValues.forEach(item => {
    const groupKey = JSON.stringify(item.slice(0, group.length))
    if (!groupMap[groupKey]) groupMap[groupKey] = []
    groupMap[groupKey].push(item)
  })

  const result = []
  Object.values(groupMap).forEach(groupItems => {
    // 分组内至少有2条数据才进行配对，按顺序两两匹配
    for (let i = 0; i < groupItems.length; i += 2) {
      if (i + 1 >= groupItems.length) break
      const item1 = groupItems[i]
      const item2 = groupItems[i + 1]
      const prefix = item1.slice(0, group.length).join(',')
      // 遍历select生成对应格式的条目
      select.forEach((selectItem, idx) => {
        result.push([
          `{${prefix},${selectItem}}`,
          item1[group.length + idx],
          item2[group.length + idx]
        ])
      })
    }
  })

  // 一次性更新状态，避免异步更新覆盖问题
  setArrayData(result)
}

用你提供的测试数据运行上述代码，得到的结果和你预期的完全一致：

[ [ '{g1,g2,F1}', 1, 3] , ['{g1,g2,F2}', 2,4] ]

内容的提问来源于stack exchange，提问作者Frederico Henrichs Sheremetief