如何解决React产品变体展示中的重复值问题（下拉/单选）

前端处理方案（React端） #

直接在获取变体数据后，通过Set数据结构提取唯一值，再转成数组用于渲染组件。

代码示例： #

import { useEffect, useState } from 'react';

const ProductDetail = ({ productId }) => {
  const [uniqueSizes, setUniqueSizes] = useState([]);
  const [uniqueColors, setUniqueColors] = useState([]);

  useEffect(() => {
    const fetchVariants = async () => {
      // 调用变体接口获取原始数据
      const res = await fetch(`/api/variants/${productId}`);
      const variants = await res.json();

      // 提取并去重size，同时过滤空值
      const sizes = [...new Set(variants.map(v => v.size))].filter(size => size);
      setUniqueSizes(sizes);

      // 提取并去重color，同时过滤空值
      const colors = [...new Set(variants.map(v => v.color))].filter(color => color);
      setUniqueColors(colors);
    };

    fetchVariants();
  }, [productId]);

  return (
    <div>
      {/* Size下拉菜单 */}
      <select>
        {uniqueSizes.map(size => (
          <option key={size} value={size}>{size}</option>
        ))}
      </select>

      {/* Color单选按钮组 */}
      <div className="color-options">
        {uniqueColors.map(color => (
          <label key={color}>
            <input type="radio" name="product-color" value={color} />
            <span>{color}</span>
          </label>
        ))}
      </div>
    </div>
  );
};

export default ProductDetail;

后端处理方案（Node.js + MongoDB） #

通过MongoDB聚合查询直接返回去重后的size和color，减少前端数据处理量，同时降低传输的数据体积。

代码示例： #

// 变体接口路由文件（routes/variants.js）
const express = require('express');
const router = express.Router();
const ProductVarient = require('../models/ProductVarient');
const mongoose = require('mongoose');

router.get('/:productId', async (req, res) => {
  try {
    const { productId } = req.params;
    // 聚合查询获取唯一的size和color集合
    const uniqueOptions = await ProductVarient.aggregate([
      { $match: { product: mongoose.Types.ObjectId(productId) } },
      {
        $group: {
          _id: null,
          sizes: { $addToSet: '$size' },
          colors: { $addToSet: '$color' }
        }
      }
    ]);
    // 若无匹配数据，返回空数组默认值
    res.json(uniqueOptions[0] || { sizes: [], colors: [] });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

前端调用调整： #

后端返回结构化的去重数据后，前端可直接使用：

useEffect(() => {
  const fetchVariants = async () => {
    const res = await fetch(`/api/variants/${productId}`);
    const { sizes, colors } = await res.json();
    setUniqueSizes(sizes.filter(size => size));
    setUniqueColors(colors.filter(color => color));
  };
  fetchVariants();
}, [productId]);

方案选择建议 #

• 前端处理：实现简单，无需修改后端逻辑，适合变体数量较少的场景
• 后端处理：更高效，减少前端计算和网络传输数据量，适合变体数量多的场景

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