跟随Pluralsight教程开发React Native FlatList遇undefined错误求助

以下是导致你遇到undefined错误的核心问题及修复方案：

• React Native 模块拼写错误
  页面代码的导入路径写成了reactage:-native，这是明显的拼写错误，导致所有从React Native导入的组件（View、Text、FlatList等）都无法正确加载，直接引发undefined错误。
  修复：将导入语句修正为正确的模块名：

  import { View, Text, List, FlatList, StyleSheet, Image, TouchableOpacity } from 'react-native';
  

• ItemDB 数据未正确导出
  你的DB代码仅定义了itemList变量，但未对外导出，而页面中使用了解构导入import { itemList } from './ItemDB';，这会导致itemList为undefined，FlatList的data属性拿到undefined后必然报错。
  修复：在ItemDB.js中添加export关键字，同时闭合未完成的数组：

  export const itemList = [
      {
          id: 1,
          name: 'Apple',
          image: require('./images/apple.png'),
          price: 0.99,
          description: 'A delicious apple',
          shortDescription: 'An apple',
      },
      // 可在此补充更多商品数据
  ];
  

• 样式重复引用问题（次要但易引发异常）
  TouchableOpacity和内部的Text都使用了styles.itembutton，通常按钮样式是给容器的，文本需要单独的样式，避免样式冲突导致的异常：
  示例修复：

  // 在StyleSheet中新增文本样式
  const styles = StyleSheet.create({
    // 原有样式...
    itembutton: {
      // 按钮容器样式，比如背景色、 padding 等
    },
    buttonText: {
      color: '#fff',
      fontSize: 14,
      textAlign: 'center'
    }
  })
  
  // 修改Text组件的style属性
  <Text style={styles.buttonText}>Put in Shopping Cart</Text>
  

• FlatList keyExtractor 规范问题
  keyExtractor返回的item.id是数字类型，React要求key必须是字符串，虽然多数场景下不会报错，但建议遵循规范：

  keyExtractor={(item) => item.id.toString()}
  

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