Я разрабатываю приложение 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",
},
});
itemData
не входит в область действия функции pressHandler
. Вы можете сделать что-то вроде этого: определите pressHandler
как function pressHandler(itemData) { .. }
, а затем используйте onPress = {() => pressHandler(itemData)}
Проблема в функции 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, });
}
Я не знаком с этим курсом Udemy, но вижу, что в вашей функции pressHandler вы будете использовать эту переменную itemData. Откуда берется ценность? У вас есть состояние с этим значением? Наверное ошибка там.