React Native如何读取JSON文件数据并在FlatList中展示课程内容

报错排查 #

你遇到的Object is not a constructor(evaluating 'new_meal.default)报错，和你贴出的当前页面代码没有直接关联，优先排查以下两点：

• 检查CategoryGrid组件的导入导出语法：如果组件是export default导出的，导入时必须用import CategoryGrid from '组件路径'的写法，不能加花括号，写法错误会触发这类构造函数报错
• 检查是否有其他文件错误导入了名为meal的组件，你当前代码没有涉及meal相关逻辑，报错源头大概率来自其他文件的导入语法错误

功能实现修正 #

你当前代码的核心问题是FlatList的data属性传值错误，FlatList要求接收数组格式数据，但你导入的JSON整体是对象结构，不同分类的课程是对象下的不同数组成员，需要先提取「Top rated」分类对应的数组再传入：

// 确认JSON文件相对路径和当前文件位置匹配
const courseData = require("../Data/static_courses_data.json");
// 确保CategoryGrid导入方式正确
import CategoryGrid from './你的CategoryGrid组件路径';

const CategoriesScreen = (props) => {
  // 提取Top rated分类的课程数组，兜底空数组避免报错
  const topRatedCourses = courseData["Top rated"] || [];

  const renderCourseItem = (itemData) => {
    return (
      <CategoryGrid
        title={itemData.item.Title}
        imgUrl={itemData.item["image-url"]}
        onSelect={() => {
          // 补充点击课程的跳转逻辑即可
        }}
      />
    );
  };

  return (
    <View style={{flex:1, paddingHorizontal: 16, paddingVertical: 12}}>
      {/* 可选：增加分类标题匹配Udemy展示样式 */}
      <Text style={{fontSize: 20, fontWeight: 'bold', marginBottom: 12}}>Top rated</Text>
      <FlatList 
        data={topRatedCourses} 
        renderItem={renderCourseItem} 
        numColumns={2}
        keyExtractor={(item, index) => item.id?.toString() || index.toString()}
        columnWrapperStyle={{justifyContent: 'space-between', marginBottom: 16}}
      />
    </View>
  );
};

export default CategoriesScreen;

额外配置说明 #

• keyExtractor是必填配置，否则会抛出列表项缺少唯一key的警告
• columnWrapperStyle用于控制两列卡片的间距，实现更贴近Udemy的网格布局效果
• 注意调整CategoryGrid组件的宽度，确保两列卡片总宽度不超过屏幕可显示宽度，避免布局溢出

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