React Native类组件遍历API返回数组渲染卡片时触发Component Exception错误的问题排查

这个问题我之前也碰到过，本质是组件渲染时机和数据异步加载的冲突，咱们一步步拆解：

错误的核心原因 #

你在constructor里初始化this.state.results为一个空对象{}，而组件的第一次render会在componentDidMount（也就是你发起API请求的地方）之前执行。这时候this.state.results.response根本不存在，是undefined，你直接调用.map()自然就会抛出"undefined is not an object"的错误。

至于控制台用for循环能正常显示，那是因为你在控制台输出的时候，API请求已经完成，response数据已经存在了，和组件第一次渲染的时机完全不一样。

两种简单有效的解决方案 #

方案1：给response设置初始空数组

修改constructor里的state初始化，给results.response默认一个空数组，这样第一次渲染的时候map()调用在空数组上，不会报错，等API返回数据后再更新渲染：

constructor(props){
  super(props)
  this.state = {
    results :{ response: [] }, // 初始化response为空数组
    namee:'fahad',
  };
}

方案2：渲染前做条件判断

在调用map()之前，先检查response是否存在，这里可以用ES6的可选链操作符?.，或者短路求值&&：

render() {
  const { navigate } = this.props.navigation;
  return (
    <View >
      {/* 用可选链操作符确保response存在才调用map */}
      { this.state.results.response?.map(row => (
        {/* 别忘了给列表项加唯一key，这是React列表渲染的规范 */}
        <Card key={row.country}> 
          <Card.Title>{row.population}</Card.Title>
          <Card.Divider/>
        </Card>
      ))}
    </View>
  )
}

额外提醒：别忘了加key属性 #

React渲染列表的时候，每个子元素都需要一个唯一的key属性，用来帮助React识别哪些元素变化了，避免不必要的重渲染。这里用row.country作为key就很合适，因为每个国家是唯一的。

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