React Native中map遍历嵌套JSON渲染卡片无内容的解决方法

我帮你梳理下几个导致卡片没内容的核心问题，一步步来解决：

问题1：数据路径错误 & Key值不合法 #

你当前的map函数里存在两处关键错误：

this.state.courses.map(course => <HomeScreen key={course.categories.name} course={course}/>)

• 数据路径错误：你的JSON结构里，每个条目是{data: {...}, headers: [], status:200}，所以categories属于course.data下的数组，不是直接挂在course上；而且categories是数组，不能直接取categories.name，要先取数组内的元素（还要处理空数组的情况）。
• Key值不合法：用course.categories.name当key非常危险——如果某个条目的categories是空数组（比如第二个MCQ条目），会导致key为undefined，React会报错；建议用唯一且稳定的值，比如讲师ID或者课程名称。

问题2：HomeScreen组件未正确读取props #

你把course传给了HomeScreen组件，但组件内需要正确解析props.course.data里的字段。比如如果是函数组件，应该这么写：

const HomeScreen = ({ course }) => {
  const { data } = course;
  // 处理空分类的情况，避免报错
  const categoryName = data.categories.length > 0 ? data.categories[0].name : '无分类';
  return (
    <div className="card">
      <p>分类：{categoryName}</p>
      <p>讲师：{data.instructor.name}</p>
    </div>
  );
};

如果是类组件，就通过this.props.course.data来读取对应字段。

问题3：确保state中的courses已正确初始化 #

还要确认你的this.state.courses确实是解析后的JSON数组。比如在类组件的生命周期里正确获取并设置状态：

componentDidMount() {
  // 假设你从接口获取数据，这里替换成你的实际请求逻辑
  fetch('你的数据接口地址')
    .then(res => res.json())
    .then(rawData => this.setState({ courses: rawData }))
    .catch(err => console.error('数据获取失败：', err));
}

修正后的renderCourses方法 #

把你的renderCourses改成如下形式：

renderCourses() {
  return this.state.courses.map(course => {
    // 用讲师ID作为唯一key，保证稳定性
    const uniqueKey = course.data.instructor.id;
    return <HomeScreen key={uniqueKey} course={course} />;
  });
}

这样调整后，卡片应该就能正确渲染出分类和讲师名称啦～

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