React Native中film.genres.map报错：undefined is not an object

问题描述 #

我在React Native项目中遇到了如下报错：

undefined is not an object (evaluating 'film.genres.map')

除了电影类型（Genre(s)）的渲染部分，其余内容都能正常显示。控制台打印的film.genres是一个正常的数组：

Array [ 
  Object { "id": 12, "name": "Aventure", }, 
  Object { "id": 14, "name": "Fantastique", }, 
  Object { "id": 10751, "name": "Familial", }, 
]

以下是我的相关代码：

componentDidMount() { 
  console.log(this.props.navigation.state.params.idFilm) 
  getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => { 
    this.setState({ film: data, isLoading: false, }) 
  }) 
} 

_displayFilm() { 
  if(this.state != '') { 
    const { film } = this.state 
    return ( 
      <ScrollView> 
        <Image> 
        </Image> 
        <View style={styles.overview_container}> 
          <Text style={styles.overview_title}>{film.title}</Text> 
          <Text style={styles.overview_description}>{film.overview}</Text> 
        </View> 
        <View style={styles.informations_container}> 
          <Text>Sorti le {film.release_date}</Text> 
          <Text>Note : {film.vote_average}</Text> 
          <Text>Nombre de votes : {film.vote_count}</Text> 
          <Text>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text> 
          <Text>Genre(s) : {film.genres.map((item) => { console.log(item) })}</Text> 
          <Text></Text> 
        </View> 
      </ScrollView> 
    ) 
  } 
}

为什么film.genres的map方法无法正常工作呢？

解决方案 #

嘿，我来帮你拆解这个问题！其实问题出在组件初始渲染的时机和错误的渲染条件判断上：

1. 核心原因：初始渲染时film.genres是undefined #

你的getFilmDetailFromApi是异步请求，组件会先完成初始渲染，这时候this.state.film还没被赋值（或者初始状态里film是undefined）。而你写的渲染条件if(this.state != '')完全无效——因为this.state是一个对象，永远不会等于空字符串，所以初始渲染时会直接进入代码块，尝试访问film.genres，这时候film可能还不存在，自然就会抛出undefined is not an object的错误。

2. 具体修复步骤 #

第一步：修正渲染条件

把无效的判断改成检查film是否存在，并且genres是数组：

_displayFilm() { 
  const { film } = this.state;
  // 确保film存在，且genres是数组再渲染
  if(film && Array.isArray(film.genres)) { 
    return ( 
      // ... 你的原有渲染代码
    ) 
  }
  // 如果条件不满足，可以返回加载提示或者null
  return <Text>Chargement...</Text>;
}

第二步：初始化state避免undefined

在组件的构造函数里给film和genres设置初始值，这样即使异步请求还没完成，访问film.genres也不会报错：

constructor(props) {
  super(props);
  this.state = {
    film: { genres: [] }, // 初始化genres为空数组
    isLoading: true
  };
}

第三步：修复map的返回值

另外，你当前的map方法里只有console.log(item)，没有返回任何JSX元素，就算不报错，也不会渲染出类型名称。需要返回一个可渲染的组件，比如：

<Text>Genre(s) : {film.genres.map((item, index) => (
  <Text key={index} style={{marginRight: 8}}>{item.name}</Text>
))}</Text>

这样修改后，不仅能解决报错问题，还能正确渲染出电影的类型列表啦！

内容的提问来源于stack exchange，提问作者Tony S