React.js产品属性选择按钮active类跨产品误激活问题求解

问题根因 #

当前选中态存储和匹配逻辑存在维度缺失：

• 顶层App的state只存了activeName、activeColor两个孤立的规格项ID，没有绑定这个选中项所属的产品ID、属性组ID，所有产品共用同一份选中值
• 渲染时判断active状态仅比对了规格项ID，没有校验当前遍历的产品、属性组是否和选中值所属对象匹配，只要不同产品下有相同ID的规格项，就会同时命中active样式规则

具体修复步骤 #

1. 重构App层state结构与选中处理逻辑 #

废弃原来扁平的单值存储，改用嵌套对象按「产品ID-属性ID-选中项ID」的层级存储选中状态，统一不同类型属性的处理方法，不用再单独拆分text、color两套逻辑。
修改后的App.js核心代码：

class App extends Component {
  Data;
  constructor(props) {
    super(props);
    this.state = {
      // 存储结构：{ [产品ID]: { [属性ID]: 选中的规格项ID } }
      selectedAttributes: {}
    };
    this.handleAttributeSelect = this.handleAttributeSelect.bind(this);
  }

  /**
   * 规格选择统一处理方法
   * @param {string|number} productId 当前操作的产品ID
   * @param {string|number} attributeId 当前操作的属性组ID（比如Color、Size）
   * @param {string|number} itemId 选中的具体规格项ID
   */
  handleAttributeSelect(productId, attributeId, itemId) {
    this.setState(prev => ({
      selectedAttributes: {
        ...prev.selectedAttributes,
        [productId]: {
          ...prev.selectedAttributes[productId],
          [attributeId]: itemId
        }
      }
    }));
  }

记得把selectedAttributes和handleAttributeSelect通过props传给Cart组件。

2. 修改Cart组件的渲染与匹配逻辑 #

遍历产品列表时提前取出当前产品对应的已选规格，判断active状态时增加产品、属性组维度的校验，点击时直接透传三个维度的参数，不再从event对象上取ID。
修改后的Cart.js核心代码：

<div className={s.attributesContainer}>
  {/* 遍历产品列表时拿到当前产品的唯一ID，假设单条产品变量名为product */}
  {products.map(product => {
    // 取当前产品已选中的规格，不存在则初始化空对象
    const currentSelected = this.props.selectedAttributes[product.id] || {};
    
    return product.attributes.map((attribute) => {
      return (
        <div key={attribute.id}>
          <div className={s.attributesName}>{attribute.id}:</div>
          {attribute.items.map((item) => {
            // 三个维度同时匹配才判定为选中态
            const isActive = currentSelected[attribute.id] === item.id;
            return ( 
              <div className={s.attributesButton} key={item.id}>
                <div 
                  className={
                    attribute.type === "text" 
                      ? isActive ? s.itemsAttrributesActive : s.itemsAttrributes
                      : isActive ? s.itemsAttrributesColorActive : s.itemsAttrributesColor
                  } 
                  style={{ background: item.value }}
                  onClick={() => this.props.handleAttributeSelect(product.id, attribute.id, item.id)}
                >
                  <button 
                    className={
                      attribute.type === "text" 
                        ? isActive ? s.buttonInfoActive : s.buttonInfo
                        : s.buttonInfo
                    } 
                  >
                    {attribute.id !== "Color" ? item.displayValue : null}
                  </button>
                </div>
              </div>
            )
          })}
        </div>
      )
    })
  })}
</div>

额外优化点 #

• 所有map遍历返回的JSX根元素必须加唯一key属性，原代码中产品遍历层、属性项遍历层都存在漏加key的问题，会导致React虚拟DOM比对异常，偶发样式、状态错乱
• 不要通过在DOM上挂自定义id属性、再从event对象取id的方式传业务参数，直接在点击回调里透传参数更可靠，也能避免页面ID重复导致的取值错误
• 统一属性处理逻辑后，后续新增容量、材质等其他属性类型时，不需要再修改state结构和处理方法，可直接复用逻辑

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