React Native中如何合并两个接口数组数据并渲染关联图片

实现流程 #

• 请求第一组接口获取experts基础列表
• 遍历列表项，用每项的integration_id作为参数，请求第二组人员详情接口
• 将详情接口返回的pic字段合并到对应基础列表项中
• 基于合并完成的全量数据渲染页面图片

代码实现 #

采用异步并发请求处理，避免串行等待耗时过长，兼容异常场景兜底：

async function fetchMergedData() {
  try {
    // 拉取第一组专家基础数据，替换为实际第一组接口地址
    const baseRes = await fetch('/your-first-experts-endpoint')
    const baseData = await baseRes.json()
    const expertList = baseData.experts ?? []

    // 生成所有详情请求任务
    const detailTasks = expertList.map(async (expert) => {
      const detailRes = await fetch(`https://xxx/api/?staff=${expert.integration_id}`)
      const detailData = await detailRes.json()
      // 匹配对应人员详情，按接口结构uzmanlar数组仅返回对应id的单条数据
      const matchStaff = detailData.uzmanlar?.[0] ?? {}
      // 字段合并，pic字段不存在时使用默认占位图
      return {
        ...expert,
        pic: matchStaff.pic ?? 'default-avatar.png',
        staffRealName: matchStaff.ad_soyad ?? ''
      }
    })

    // 等待所有详情请求完成，返回合并后的数组
    return await Promise.all(detailTasks)
  } catch (error) {
    console.error('数据拉取异常：', error)
    return []
  }
}

// 页面渲染方法
async function renderExperts() {
  const mergedData = await fetchMergedData()
  const listDom = document.getElementById('expert-list')
  // 拼接DOM插入页面，图片域名替换为实际静态资源地址
  listDom.innerHTML = mergedData.map(item => `
    <div class="expert-item">
      <img class="avatar" src="https://your-static-domain/${item.pic}" alt="${item.name}" />
      <span class="name">${item.name}</span>
    </div>
  `).join('')
}

// 页面加载完成后触发渲染
document.addEventListener('DOMContentLoaded', renderExperts)

优化提示 #

• 若experts列表长度超过10，建议增加并发控制，限制同时发起的请求数在3-5个，避免触发接口限流
• 图片加载失败可以加onerror事件兜底显示默认头像，提升体验
• 如果项目中使用了Vue/React等框架，只需要把mergedData赋值给响应式变量，模板里直接循环渲染即可，不用手动拼接DOM

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