React Native：如何在JSX内渲染嵌套JSON列表并解决报错

首先咱们来拆解你遇到的问题：

1. 核心错误：访问了不存在的属性 #

你在代码里写了user.data.name，但看你的JSON响应结构，data对象里并没有name字段！name是在data.categories这个数组的第一个元素里；另外你想展示的this.state.user.data也是错误的——this.state.user是一个数组，数组本身没有data属性，你应该用循环里的当前项user.data来访问对应数据。

2. 潜在问题：未处理空状态 #

如果组件初始状态this.state.user是空数组或者undefined，直接调用map会触发报错，所以最好先做非空判断。

修复后的代码示例 #

下面是修正后的渲染代码，我会根据你的JSON结构展示几个常见字段（比如学生总数、讲师名字、分类名称）：

render() {
  // 先判断user数组是否存在且有内容，避免初始加载报错
  if (!this.state.user || this.state.user.length === 0) {
    return <Text>No data available</Text>;
  }

  return this.state.user.map((userItem, index) => (
    <CardSection key={userItem.data.instructor.id}> {/* 用唯一标识作为key，比index更稳定 */}
      <View style={styles.thumbnailContainerStyle}>
        {/* 展示学生总数 */}
        <Text style={styles.userStyle}>Total Students: {userItem.data.total_students}</Text>
        {/* 展示讲师名字 */}
        <Text style={styles.userStyle}>Instructor: {userItem.data.instructor.name}</Text>
        {/* 展示分类名称，先判断categories数组是否有内容 */}
        {userItem.data.categories.length > 0 && (
          <Text style={styles.userStyle}>Category: {userItem.data.categories[0].name}</Text>
        )}
      </View>
    </CardSection>
  ));
}

关键修正点说明 #

• 循环变量改用userItem（只是为了更清晰，避免和全局变量混淆），通过userItem.data访问当前项的data对象
• 替换了错误的user.data.name，改为实际存在的字段，比如userItem.data.instructor.name或userItem.data.categories[0].name
• 给map的每一项设置了稳定的key（用讲师id替代index，符合React的最佳实践）
• 增加了空状态判断，避免组件初始化时的报错
• 访问categories[0].name前先判断数组长度，防止数组为空时触发读取错误

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