React map遍历数组时如何获取前序元素对比并动态设置id

你写的两个版本返回undefined/NaN，核心是几个基础写法错误：

• map遍历的回调参数里，item就是当前索引对应的单个元素对象，不是原数组，写item[i]等于在单个对象上找索引为i的属性，永远拿不到有效值。要取相邻元素必须从原数组products上按索引取。
• JS原生不支持负数索引访问数组元素，current[-1]的写法是在当前元素对象上找key为-1的属性，结果必然是undefined。
• 没有处理边界情况：数组第一个元素索引为0，不存在前一个元素，直接访问products[-1]会拿到undefined，再读取productName属性会直接抛类型错误。
• 第二个for循环把return pre写在循环体内部，第一次循环就会终止函数返回，根本完不成遍历。

直接在map遍历里做相邻对比即可，不需要额外写独立的对比函数：

products.map((item, i) => {
  // 第一个元素无前置元素，默认设置id；其余元素和前一个的productName做对比
  const showLineId = i === 0 
    ? true 
    : item.productName !== products[i-1].productName

  return (
    <div
      className="pwrap"
      key={item.id} // 优先用数据自带的唯一id当key，比索引更稳定，避免动态列表渲染bug
      id={showLineId ? "line" : null}
    >
      {/* 这里放你原本要渲染的业务内容 */}
    </div>
  )
})

补充说明：如果你的列表存在排序、增删、过滤的动态操作，不要用遍历索引作为key值，否则会出现DOM复用错误、状态错乱的问题，用数据自带的唯一id（比如你示例里每个对象的id字段）是React官方推荐的写法。

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