React中基于_id映射两个对象数组时如何提取关联图片数据

数据老陈

2026-10-30

现有代码问题定位

filter方法返回的是匹配结果组成的数组，而非单条数据对象，直接将数组赋值给img的src属性时，浏览器会将其转为[object Object]字符串，完全无法作为图片地址加载
取值路径错误：blur_photo和photo本身都是数组结构，图片地址存放在数组的第一个元素对象里，原代码直接对数组取.potrait/.cover属性，拿到的是undefined
性能浪费：在每个商品的map循环里都调用some+filter双重遍历obj2，数据量稍大时会产生不必要的性能消耗

优化实现方案

第一步：提前构建购买数据的索引表

循环外先把obj2按照_id做键值映射，一次遍历完成，后续匹配时直接通过key取值，无需反复遍历数组：

const purchaseIdMap = obj2.reduce((map, currentItem) => {
  map[currentItem._id] = currentItem
  return map
}, {})

第二步：改写图片渲染逻辑

严格按照数组嵌套结构取图片地址，匹配到购买数据就用正常图，未匹配到就用商品自带的模糊占位图：

{
  obj1.map((goodsInfo) => {
    // 从提前构建的索引里直接拿匹配的购买记录
    const matchedRecord = purchaseIdMap[goodsInfo._id]
    // 按嵌套结构取对应图片地址，加可选链避免空数组报错
    const imgSource = matchedRecord
      ? matchedRecord?.photo?.[0]?.cover ?? goodsInfo?.blur_photo?.[0]?.potrait
      : goodsInfo?.blur_photo?.[0]?.potrait

    return (
      <img
        src={imgSource}
        height="100%"
        width="100%"
        alt="商品展示图"
      />
    )
  })
}

效果说明