React Native餐食App开发遇ReferenceError：找不到itemData变量求排查

错误原因 #

你遇到的ReferenceError是因为pressHandler函数中引用的itemData不在它的作用域范围内。itemData是renderCategoryItem函数的参数，只能在renderCategoryItem函数内部访问，而独立定义的pressHandler无法获取到这个变量。

修复方案 #

这里提供两种可行的修复方式：

方案一：将pressHandler定义在renderCategoryItem内部

把点击处理函数移到renderCategoryItem里面，这样它就能直接访问到当前的itemData：

import { FlatList, StyleSheet } from "react-native";
import { CATEGORIES } from "../data/dummy-data";
import CategoryGridTile from "../components/CategoryGridTile";

function CategoriesScreen({ navigation }) {
  function renderCategoryItem(itemData) {
    // 移到renderCategoryItem内部，可直接访问itemData
    function pressHandler() {
      navigation.navigate("Meals Overview", { categoryId: itemData.item.id });
    }
    return (
      <CategoryGridTile
        title={itemData.item.title}
        color={itemData.item.color}
        onPress={pressHandler}
      />
    );
  }
  return (
    <FlatList
      data={CATEGORIES}
      keyExtractor={(item) => item.id}
      renderItem={renderCategoryItem}
      numColumns={2}
    />
  );
}
export default CategoriesScreen;

方案二：让pressHandler接收参数

修改pressHandler使其接收当前项作为参数，在触发点击时传入对应的数据：

import { FlatList, StyleSheet } from "react-native";
import { CATEGORIES } from "../data/dummy-data";
import CategoryGridTile from "../components/CategoryGridTile";

function CategoriesScreen({ navigation }) {
  // 接收item参数
  function pressHandler(item) {
    navigation.navigate("Meals Overview", { categoryId: item.id });
  }
  function renderCategoryItem(itemData) {
    return (
      <CategoryGridTile
        title={itemData.item.title}
        color={itemData.item.color}
        // 点击时传入当前item
        onPress={() => pressHandler(itemData.item)}
      />
    );
  }
  return (
    <FlatList
      data={CATEGORIES}
      keyExtractor={(item) => item.id}
      renderItem={renderCategoryItem}
      numColumns={2}
    />
  );
}
export default CategoriesScreen;

验证 #

两种方案都能解决作用域问题，确保点击分类卡片时能正确传递categoryId到Meals Overview页面，你的MealsOverviewScreen和CategoryGridTile代码无需修改，保持原样即可。

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