{serviceItem?.subSelects?.map((item, index) => ( {item?.name} -Go服务器开发

为了实现双层循环中点击项高亮时不影响其他项的功能，您需要确保每个item的状态是独立管理的。这可以通过在组件的状态中为每个item维护一个独立的高亮状态来实现。

这里有一个示例代码，展示如何做到这一点：

import React, { useState } from 'react';

const ExampleComponent = ({ serviceItem }) => {
  // 使用一个对象来存储每个 item 的选中状态
  const [selectedGoodsIds, setSelectedGoodsIds] = useState({});

  const handleClick = (goodsId, itemIndex) => {
    // 复制当前状态以避免直接修改
    const currentSelections = { ...selectedGoodsIds };
    
    // 切换选择状态
    if (currentSelections[itemIndex] === goodsId) {
      delete currentSelections[itemIndex]; // 如果已选中则取消选择
    } else {
      currentSelections[itemIndex] = goodsId; // 否则设置为当前选择的 goodsId
    }

    setSelectedGoodsIds(currentSelections);
  };

  return (
    <div>
      {serviceItem?.subSelects?.map((item, index) => (
        <div className="home-popup-popupItem" key={index}>
          <div className="home-popup-popupItem-title">{item?.name}</div>
          <div className="home-popup-popupItem-content">
            {item?.subNode?.map((item1, index1) => (
              <div
                key={index1}
                className={`home-popup-popupItem-content-subItem ${
                  selectedGoodsIds[index] === item1?.goodsInfo?.goodsId ? 'subItemActive' : ''
                }`}
                onClick={() => {
                  if (!item1?.goodsInfo?.goodsStock) return;
                  handleClick(item1.goodsInfo.goodsId, index);
                }}
              >
                {/* 渲染子项内容 */}
                {item1.name} {/* 假设这里是渲染子项名字 */}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ExampleComponent;

解读

状态管理: 我们使用了 selectedGoodsIds 来保存每个 subSelects 项目下被选中的商品 ID。这个对象的键对应于 subSelects 的索引。
点击处理: 在点击子项时，我们首先获取当前存储的选中商品 ID，然后更新相应项目的值。如果该商品已经被选中，则移除它；如果没有则添加它。
条件渲染: 在 className 中，根据 selectedGoodsIds[index] 是否等于当前商品 ID 来决定是否应用高亮样式（例如：’subItemActive’）。