产品信息API循环逻辑异常：重复值与图片显示问题排查

核心问题分析 #

1. 全局变量被覆盖：你用了全局的arr变量，所有循环都会修改它，最终只会保留最后一次循环的结果，所以只显示一张图片。
2. 循环逻辑混乱：三层嵌套循环导致重复遍历，且gallery.map里只是修改变量而非直接渲染，条件判断逻辑也写反了（应该是匹配颜色ID时显示图片，不匹配时显示色块）。
3. 无效嵌套循环：colors.map嵌套Counts.map会让每个颜色遍历所有库存记录，造成不必要的重复处理。

修复后的代码 #

// 先预处理：筛选出有库存的颜色ID集合
const availableColorIds = new Set(things.Counts.filter(col => col.Count > 0).map(col => col.ColorId));

// 遍历有库存的颜色
{things.colors
  .filter(item => availableColorIds.has(item.Id))
  .map((item) => {
    // 找到当前颜色对应的gallery图片
    const matchedImage = gallery?.find(items => items.ColorId === item.Id);
    
    return (
      <div key={item.Id} className="col-span-1 transition duration-150 ease-in hover:opacity-90">
        {matchedImage ? (
          <img
            src={`http://static.etmamode.ir${matchedImage.Link}`}
            alt={`${item.Name} 图片`}
            style={{
              borderRadius: "5px",
              width: "100px",
              height: "100px",
            }}
          />
        ) : (
          <span
            style={{
              display: "block",
              width: "100px",
              height: "100px",
              borderRadius: "5px",
              backgroundColor: `#${item.ColorCode}`,
            }}
          ></span>
        )}
      </div>
    );
  })}

关键修改点 #

• 预处理数据：先用Set存储有库存的颜色ID，再筛选出对应颜色，避免嵌套循环。
• 去掉全局变量：直接用find找到当前颜色对应的图片，无需全局变量传递状态。
• 修正逻辑：匹配到图片时显示图片，否则显示色块，符合业务需求。
• 添加key：循环渲染时加上key，符合React的性能优化要求。

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