You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何解决fetch请求JSON时出现的‘Cannot read property 'forEach' of undefined’错误?

解决TypeError: Cannot read property 'forEach' of undefined的问题

嘿,这个错误我见得挺多的,咱们一步步来排查~

你遇到的TypeError: Cannot read property 'forEach' of undefined本质是你尝试调用forEachdata.array根本不存在——也就是说,接口返回的JSON数据结构和你预期的不一样,里面没有叫array的字段。

问题分析

你用POST请求获取数据后,直接默认返回的data里有一个array数组,但实际接口返回的结构大概率不是这样的。很多API会把列表数据放在resultsdata或者其他自定义命名的字段里,而非array

解决步骤

  • 第一步:先搞清楚接口返回的真实结构
    把你代码里的data.array.forEach(...)暂时替换成console.log(data),运行后打开浏览器控制台,看看接口返回的JSON到底是什么样的。比如可能返回的结构是:

    {
      "results": [
        {"id": 1942, "name": "xxx", "cover": {"url": "xxx"}}
      ]
    }
    

    这时真正的数组字段就是results,而不是你假设的array

  • 第二步:替换成正确的字段名并增加容错判断
    找到正确的数组字段后,替换掉data.array,同时最好加个判断,防止数组不存在时再次报错:

修改后的完整代码

fetch(url, { 
  method: 'POST', 
  headers: { "user-key": 'mykey' }, 
  body: 'fields id, name, cover.url; where id = 1942;' 
}) 
.then(response => response.json()) 
.then((data) => {
  // 先打印查看真实返回结构,调试完可以删掉这行
  console.log('接口返回数据:', data);
  
  // 替换成你从控制台看到的真实数组字段名,比如results
  const targetArray = data.results;
  
  // 先判断数组是否存在且是数组类型,再遍历
  if (targetArray && Array.isArray(targetArray)) {
    targetArray.forEach(element => {
      console.log(element);
    });
  } else {
    console.error('未找到可遍历的数组,请检查接口返回的数据结构');
  }
}) 
.catch((error) => console.log(error))

内容的提问来源于stack exchange,提问作者Jader

火山引擎 最新活动