基于ID合并产品数组并优先展示筛选结果的React/Next.js解决方案

原代码的局限 #

原方案通过数组拼接+Map去重实现优先级控制，但存在以下问题：

• 逻辑重复：两种优先级分支的代码高度冗余，复用性差
• 边界场景处理缺失：即便某一个筛选数组为空，仍会执行完整的Map操作，存在计算冗余
• 扩展性不足：后续新增其他筛选维度时，难以快速适配现有逻辑

优化方案：封装通用合并函数+React性能优化 #

我们可以封装一个通用的合并去重工具函数，同时结合React的useMemo缓存计算结果，避免不必要的重渲染，完美适配各类筛选场景。

1. 通用合并去重函数

这个函数接收两个数组和优先级配置，优先保留指定数组的元素，仅补充另一个数组中未出现的ID项，同时严格保留原数组的顺序：

/**
 * 合并两个产品数组，按ID去重并配置优先级
 * @param {Array} primaryArray - 优先保留的数组
 * @param {Array} secondaryArray - 补充数组（仅添加primary中不存在的ID）
 * @returns {Array} 合并去重后的数组
 */
const mergeAndDeduplicateProducts = (primaryArray, secondaryArray) => {
  // 构建主数组的ID映射，同时保留原有顺序
  const primaryMap = new Map(primaryArray.map(item => [item.id, item]));
  
  // 遍历补充数组，仅添加主数组中没有的项
  secondaryArray.forEach(item => {
    if (!primaryMap.has(item.id)) {
      primaryMap.set(item.id, item);
    }
  });
  
  // 转换回数组，保持主数组顺序 + 补充数组新增项的顺序
  return Array.from(primaryMap.values());
};

2. 在React/Next.js组件中使用

结合useMemo缓存合并结果，只有当依赖的筛选数组或优先级配置变化时才重新计算，提升组件性能：

import { useMemo } from 'react';

// 假设这两个是基于服务端数据的筛选逻辑
const getMenuWiseProduct = (products) => { /* 菜单筛选逻辑实现 */ };
const getCategoryWiseProduct = (products) => { /* 分类筛选逻辑实现 */ };

const ProductList = ({ products }) => {
  const prioritizeCategory = true; // 可根据业务需求动态配置（比如从组件状态/Props中获取）

  // 获取两个筛选后的产品数组
  const menuFilteredProducts = getMenuWiseProduct(products);
  const categoryFilteredProducts = getCategoryWiseProduct(products);

  // 缓存合并结果，避免无意义的重复计算
  const mergedProducts = useMemo(() => {
    // 根据优先级确定主、次数组
    const [primary, secondary] = prioritizeCategory 
      ? [categoryFilteredProducts, menuFilteredProducts] 
      : [menuFilteredProducts, categoryFilteredProducts];
    
    // 边界处理：主数组为空时直接返回补充数组
    if (primary.length === 0) return secondary;
    
    return mergeAndDeduplicateProducts(primary, secondary);
  }, [menuFilteredProducts, categoryFilteredProducts, prioritizeCategory]);

  return (
    <div className="product-list">
      {mergedProducts.map(product => (
        <div key={product.id} className="product-item">
          <h3>{product.name}</h3>
          {/* 其他产品信息渲染 */}
        </div>
      ))}
    </div>
  );
};

export default ProductList;

方案优势 #

• 复用性强：通用函数可直接复用在任何需要数组合并去重的业务场景
• 性能优异：通过useMemo缓存结果，减少不必要的计算和组件重渲染
• 边界处理完善：直接处理主数组为空的极端场景，避免无效操作
• 扩展性好：后续新增其他筛选维度时，只需调整主/次数组的传入即可快速适配

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