ReferenceError: не удается найти переменную: itemData

Я разрабатываю приложение Meals со ссылкой на React Native — Практическое руководство [2023] курс в Удеми. При использовании собственного маршрута я сталкиваюсь с упомянутой ошибкой, т.е. не могу найти itemData Может кто-нибудь помочь мне понять, где этот код идет не так.

РубрикиScreen.js

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

function CategoriesScreen({ navigation }) {
  function pressHandler() {
    navigation.navigate("Meals Overview", { categoryId: itemData.item.id, });
  }
  function renderCategoryItem(itemData) {
    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;

ПитаниеОбзорЭкран

import { View,Text,StyleSheet } from "react-native";
import {MEALS} from "../data/dummy-data"
function MealsOverviewScreen({route}){
    const catId=route.params.categoryId;
    return(
        <View style = {styles.container}>
            <Text>Meals Overview Screen - {catId}</Text>
        </View>
    )
}
export default MealsOverviewScreen;
const styles=StyleSheet.create(
    {
        container:{
            flex:1,
            padding:16,
        }
    }
)

КатегорияGridTile.js

import { Pressable, View, Text, StyleSheet, Platform } from "react-native";

function CategoryGridTile({ title, color,onPress}) {
  return (
    <View style = {styles.gridItem}>
      <Pressable
        style = {({ pressed }) => [styles.buttonStyle,pressed?styles.buttonPressed:null,]}
        android_ripple = {{ color: "#ccc" }}
        onPress = {onPress}   
      >
        <View style = {[styles.innerContainer,{backgroundColor:color }]}>
          <Text style = {styles.title}>{title}</Text>
        </View>
      </Pressable>
    </View>
  );
}
export default CategoryGridTile;

const styles = StyleSheet.create({
  gridItem: {
    flex: 1,
    margin: 16,
    height: 150,
    borderRadius: 8,
    elevation: 4,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    overflow: Platform.OS == "android" ? "hidden" : "visible",
  },
  buttonPressed: {
    opacity: 0.25,
  },
  buttonStyle: {
    flex: 1,
  },
  innerContainer: {
    flex: 1,
    padding: 16,
    borderRadius:8,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
  },
});

Я не знаком с этим курсом Udemy, но вижу, что в вашей функции pressHandler вы будете использовать эту переменную itemData. Откуда берется ценность? У вас есть состояние с этим значением? Наверное ошибка там.

Carlos Querioz 23.01.2023 16:37
itemData не входит в область действия функции pressHandler. Вы можете сделать что-то вроде этого: определите pressHandler как function pressHandler(itemData) { .. }, а затем используйте onPress = {() => pressHandler(itemData)}
Titus 23.01.2023 16:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в функции pressHandler. В функции нет объявленной и инициализированной переменной itemData, но вы все равно пытаетесь ее использовать.

Вы можете изменить код в функции CategoriesScreen, созданной в CategoriesScreen.js, как указано ниже.

От

function renderCategoryItem(itemData) {
    return (
      <CategoryGridTile
        title = {itemData.item.title}
        color = {itemData.item.color}
        onPress = {pressHandler}
      />
    );
  }

К

function renderCategoryItem(itemData) {
    return (
      <CategoryGridTile
        title = {itemData.item.title}
        color = {itemData.item.color}
        onPress = {()=>{
           pressHandler(itemData)
        }}
      />
    );
  }

От

function pressHandler() {
    navigation.navigate("Meals Overview", { categoryId: itemData.item.id, });
  }

К

function pressHandler(itemData) {
    navigation.navigate("Meals Overview", { categoryId: itemData.item.id, });
  }

Другие вопросы по теме