前端sku算法（商品多规格选择）react代码实现

以下是一个React组件的代码实现，用于实现前端SKU算法的商品多规格选择功能：

import React, { useState, useEffect } from "react";

const SKUSelector = ({ skuList }) => {
  const [selectedValues, setSelectedValues] = useState({});
  const [availableOptions, setAvailableOptions] = useState({});

  useEffect(() => {
    // 初始化可选项列表
    let options = {};
    skuList.forEach((sku) => {
      sku.attributes.forEach((attr) => {
        if (!options[attr.name]) {
          options[attr.name] = [attr.value];
        } else if (!options[attr.name].includes(attr.value)) {
          options[attr.name].push(attr.value);
        }
      });
    });
    setAvailableOptions(options);
  }, [skuList]);

  const handleValueChange = (name, value) => {
    // 更新已选项列表
    setSelectedValues({ ...selectedValues, [name]: value });

    // 根据已选项列表筛选可选项列表
    let options = { ...availableOptions };
    for (let attrName in selectedValues) {
      if (attrName !== name) {
        skuList.forEach((sku) => {
          if (
            sku.attributes.find((attr) => attr.name === attrName)?.value !==
            selectedValues[attrName]
          ) {
            options[attrName] = options[attrName].filter(
              (option) => option !== selectedValues[attrName]
            );
          }
        });
      }
    }
    setAvailableOptions(options);
  };

  const getAvailableValues = (name) => {
    // 获取指定规格属性的可选项列表
    return availableOptions[name] || [];
  };

  const getSelectedSKU = () => {
    // 根据已选项列表获取SKU信息
    let selectedSKU = null;
    skuList.forEach((sku) => {
      let matches = true;
      sku.attributes.forEach((attr) => {
        if (selectedValues[attr.name] !== attr.value) {
          matches = false;
        }
      });
      if (matches) {
        selectedSKU = sku;
      }
    });
    return selectedSKU;
  };

  return (
    <div>
      {skuList.length > 0 ? (
        skuList[0].attributes.map((attr) => (
          <div key={attr.name}>
            <label>{attr.name}:</label>
            <select
              value={selectedValues[attr.name] || ""}
              onChange={(e) => handleValueChange(attr.name, e.target.value)}
            >
              <option value="">请选择</option>
              {getAvailableValues(attr.name).map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
          </div>
        ))
      ) : (
        <div>暂无商品信息</div>
      )}
      {getSelectedSKU() ? (
        <div>
          <p>已选规格：{JSON.stringify(selectedValues)}</p>
          <p>剩余库存：{getSelectedSKU().stock}</p>
        </div>
      ) : (
        <div>请选择完整规格属性</div>
      )}
    </div>
  );
};

export default SKUSelector;

该组件接受一个SKU列表作为props，每个SKU包含一个属性列表和一个库存数量。在组件中，首先使用useEffect钩子初始化可选项列表，然后使用useState钩子管理已选项列表和可选项列表的状态。

当用户选择某个规格属性值时，组件会根据已选项列表筛选可选项列表，并更新已选项列表。当用户选择所有规格属性值后，组件会根据已选项列表获取相应的SKU信息，并显示剩余库存量。

该组件仅为示例代码，具体实现方式可能因业务需求而异。