React Native中Fetch获取数据后调用map方法报错求助

嘿，这个坑我当初刚学React Native的时候也踩过！问题其实出在组件的渲染顺序上，和你拿到的数据本身没啥关系。

你琢磨下：组件第一次渲染的时候，componentDidMount还没执行呢——这个生命周期函数是组件挂载完成后才会触发的。这时候你的this.state.layoutData还是构造函数里初始化的空对象{}，所以rep.reponse就是undefined，调用map自然会抛出TypeError。

至于你控制台看到的rep.reponse是正常数组，那是因为fetch请求完成后，你调用setState触发了第二次渲染，这时候打印的是第二次渲染的数据，但第一次渲染的错误已经先抛出来了。

给你两个简单的解决办法：

方法一：初始化state时给reponse设为空数组 #

把构造函数里的初始state改成这样，确保第一次渲染时rep.reponse是个空数组，map调用不会报错：

constructor() { 
  super(); 
  this.state = { 
    layoutData: { reponse: [] } 
  }; 
}

方法二：渲染前先判断数据是否存在 #

在调用map之前，先检查rep.reponse是否存在，不存在就返回空数组：

// 传统写法
var t = rep.reponse ? rep.reponse.map(function(item) { 
  return { key: item.color, label: item.text }; 
}) : [];

// 或者用ES6+的可选链，更简洁
var t = rep.reponse?.map(item => ({ key: item.color, label: item.text })) || [];

这样不管是第一次渲染（数据还没回来）还是后续渲染（数据已加载），代码都能正常运行啦。

内容的提问来源于stack exchange，提问作者L. Prime