Vue3中API返回数组无法映射、forEach不生效问题求助

问题根源 #

你的代码中fetch是异步操作，当执行page_resp.sections.map(...)这段代码时，API请求还未完成，page_resp.sections还是初始化的空数组，因此comps最终为空。

解决方案1：将映射逻辑放入异步回调 #

直接在API请求返回后执行数组映射，确保数据已存在：

const page_resp = reactive({ sections: [] })
const comps = ref([])

fetch(APISettings.baseURL + 'Page/getcontent?pageId=1', {
  method: 'GET',
  headers: APISettings.headers
})
  .then(response => response.json())
  .then(json => {
    page_resp.sections = json.resultData?.sections
    // 执行映射（这里可根据需求修改转换逻辑）
    comps.value = page_resp.sections.map(comp => comp)
    // 如果只是复制数组，也可以用展开语法：comps.value = [...page_resp.sections]
  })

解决方案2：使用async/await简化异步逻辑 #

用async/await让代码更易读，同时保证时序正确：

const page_resp = reactive({ sections: [] })
const comps = ref([])

async function loadPageContent() {
  try {
    const response = await fetch(APISettings.baseURL + 'Page/getcontent?pageId=1', {
      method: 'GET',
      headers: APISettings.headers
    })
    const json = await response.json()
    page_resp.sections = json.resultData?.sections
    // 按需转换数组
    comps.value = page_resp.sections.map(comp => ({
      // 示例：自定义转换字段
      id: comp.id,
      label: comp.sectionName
    }))
  } catch (error) {
    console.error('页面内容加载失败:', error)
  }
}

// 调用异步函数
loadPageContent()

解决方案3：用watch监听数组变化（适合响应式更新场景） #

如果page_resp.sections后续可能被修改，通过watch监听其变化，自动更新comps：

const page_resp = reactive({ sections: [] })
const comps = ref([])

fetch(APISettings.baseURL + 'Page/getcontent?pageId=1', {
  method: 'GET',
  headers: APISettings.headers
})
  .then(response => response.json())
  .then(json => (page_resp.sections = json.resultData?.sections))

// 监听sections的变化，实时更新comps
watch(
  () => page_resp.sections,
  (newSections) => {
    comps.value = newSections.map(comp => comp) // 替换为你的转换逻辑
  },
  { immediate: true, deep: true } // immediate确保初始化时执行一次，deep监听数组内部变化
)

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