React Native调用array.map时报undefined is not an object错误如何解决？

问题原因 #

• 初始state定义错误：你给project的初始值设为了空数组[]，但接口返回的project是对象类型，初始状态下数组不存在horarios属性，取值为undefined，调用map方法自然抛出类型错误。
• 异步请求时序问题：getUser是异步方法，组件首次渲染时接口请求还未完成，setState还未执行，render方法就已经触发，此时访问this.state.project.horarios必然是undefined。
  你之前看到控制台能打印出数组，是因为控制台打印引用类型时会延迟取值，等你手动点开查看对象内容时，接口请求已经完成、state已经更新，所以能看到有效值，但实际render首次执行时确实不存在该属性。

解决方法 #

1. 修正state初始值
   将project的初始值从空数组改为空对象，同时给horarios默认设为空数组，从源头避免undefined的情况：

state = {
  errorMessage: null,
  // 修正初始值
  project: {
    horarios: []
  },
  user:{
   id:  this.props.route.params.name 
  }
}

2. 增加属性存在性判断
   调用map之前先判断属性是否存在，可以用可选链操作符兜底，避免报错：

// 可选链写法，兼容新版React Native
const tableData = this.state.project?.horarios?.map(horario => {
  console.log(horario.segunda)
  // 注意：map回调需要返回React节点才能渲染，同时要加唯一key属性
  return <Text key={horario.segunda}>{horario.segunda}</Text>
}) ?? []

如果是不支持可选链的旧版本，可以用短路判断兜底：

const tableData = (this.state.project.horarios || []).map(horario => {
  // 你的逻辑
})

3. 可选：增加加载态判断
   数据加载完成之前可以先展示加载提示，避免页面先出现空内容：

render(){
  // 可根据project的必填字段判断是否加载完成，比如id、title等
  if(!this.state.project.title){
    return <Text>加载中...</Text>
  }
  // 原有渲染逻辑
}

另外注意你的map方法现在只打印了日志，没有返回任何组件，就算解决了报错也不会渲染出horarios的内容，需要在回调里返回你要展示的React节点，同时给每个节点加唯一的key属性。

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