React中无法访问嵌套对象category.nom属性的技术问题

我帮你分析下这个问题：你说控制台打印能看到category和professeur都有定义，但访问category.nom却报错Cannot read property 'nom' of undefined，这大概率是组件渲染时机和数据加载不同步，或者实际返回的数组里存在某个cours对象的category属性其实是undefined（哪怕你提供的示例数据里没有，接口返回偶尔会出现这种情况）。

给你两个实用的解决方案：

方案1：用可选链操作符快速解决（推荐） #

ES2020引入的可选链?.可以安全地访问嵌套属性，只要中间有属性是undefined或null，就会直接返回undefined而不会抛出错误，非常适合这种场景：

props.cours.map((cours) => {
  // 别忘了给列表项加唯一key，这是React的最佳实践哦
  return (
    <div className="col-sm" key={cours.id}>
      <CourseCard 
        title={cours.title} 
        subtitle={`${cours.professeur?.firstName} ${cours.professeur?.lastName}`} 
        tag={cours.category?.nom} 
        bgPhoto={cours.thumbnail} 
        totalReviews={30} 
        ratingAverage={cours.rating} 
      />
    </div>
  );
})

方案2：条件渲染（兼容旧项目） #

如果你的项目还没升级到支持ES2020的环境，可以手动加条件判断来确保属性存在再访问：

props.cours.map((cours) => {
  // 先判断category是否存在，不存在就给个默认值
  const categoryName = cours.category ? cours.category.nom : '暂无分类';
  const teacherName = cours.professeur ? `${cours.professeur.firstName} ${cours.professeur.lastName}` : '未知讲师';
  
  return (
    <div className="col-sm" key={cours.id}>
      <CourseCard 
        title={cours.title} 
        subtitle={teacherName} 
        tag={categoryName} 
        bgPhoto={cours.thumbnail} 
        totalReviews={30} 
        ratingAverage={cours.rating} 
      />
    </div>
  );
})

额外提醒 #

1. 一定要给map返回的每个元素加上唯一的key（比如用cours.id），这能避免React列表渲染时出现警告和不必要的性能问题。
2. 你可以检查下Redux中cours状态的初始值，如果初始是undefined或者null，可以先在组件里做个判断，比如props.cours && props.cours.map(...)，确保数据存在再遍历。

内容的提问来源于stack exchange，提问作者Zidani Mehdi