Soy relativamente nuevo en React Native y entiendo que mi problema podría ser mínimo. Estoy siguiendo la construcción de una aplicación React Native con Mosh Hamedani, y he llegado a un punto en el que su código funciona con él y no parece hacerlo conmigo, en cambio, está lanzando el
Render Error undefined is not an object (evaluating 'listing.image')He leído un buen número de preguntas que son similares y han sido resueltas, pero todavía no puedo entender mi situación. Incluyo los componentes que se cree que están produciendo este error a continuación:
import React from "react"; import { Image, StyleSheet, View } from "react-native"; import colors from "../config/colors"; import ListItem from "../components/lists/ListItem"; import Text from "../components/Text"; function ListingDetailsScreen({ route }) { const listing = route.params; return ( <View> <Image source={listing.image} style={styles.image} /> //I don't get what's wrong here. <View style={styles.detailsContainer}> <Text style={styles.title}>{listing.title}</Text> <Text style={styles.price}>ZAR {listing.price}</Text> <View style={styles.sellerContainer}> <ListItem image={require("../assets/products-images/chair.jpg")} title="Firm Name" subTitle="5 Listings" /> </View> </View> </View> ); } const styles = StyleSheet.create({ detailsContainer: { padding: 20, }, image: { width: "100%", height: 300, }, price: { color: colors.secondary, fontWeight: "bold", fontSize: 20, marginVertical: 10, }, sellerContainer: { marginVertical: 40, }, title: { fontSize: 24, fontWeight: "500", }, }); export default ListingDetailsScreen; El componente que consume ListingDetails se muestra a continuación:
import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import { TransitionPresets } from "@react-navigation/stack"; import ListingDetailsScreen from "../screens/ListingDetailsScreen"; import ListingsScreen from "../screens/ListingsScreen"; const Stack = createStackNavigator(); const FeedNavigator = () => ( <Stack.Navigator initialRouteName="ListingDetails" screenOptions={() => ({ gestureEnabled: true, headerShown: false, ...TransitionPresets.ModalPresentationIOS, })} > <Stack.Screen name="Listings" component={ListingsScreen} /> <Stack.Screen name="ListingDetails" component={ListingDetailsScreen} /> </Stack.Navigator> ); export default FeedNavigator;La lista de objetos aún no está cargada en el momento de la devolución. Pruebe un gancho useEffect() y un gancho useState() y consulte en el área de retorno si el objeto ya está cargado.
Ejemplo:
import React, { useEffect, useState } from "react"; // new imports import { Image, StyleSheet, View } from "react-native"; import colors from "../config/colors"; import ListItem from "../components/lists/ListItem"; import Text from "../components/Text"; function ListingDetailsScreen({ route }) { const [listing, setListing] = useState(); // declare the var with useState useEffect(() => { // useEffect setListing(route.params); }, [route]); return ( {listing ? ( // conditional operator <View> <Image source={listing.image} style={styles.image} /> //I don't get what's wrong here. <View style={styles.detailsContainer}> <Text style={styles.title}>{listing.title}</Text> <Text style={styles.price}>ZAR {listing.price}</Text> <View style={styles.sellerContainer}> <ListItem image={require("../assets/products-images/chair.jpg")} title="Firm Name" subTitle="5 Listings" /> </View> </View> </View> ) : ( null // maybe you can add an spinner or div here to indicate data is loading )} ); }Para mayor información por favor visite:
useState() -> https://reactjs.org/docs/hooks-state.html
useEffect() -> https://reactjs.org/docs/hooks-effect.html
Representación condicional -> https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator
Descubrí la respuesta a este problema y se encuentra en el componente FeedNavigator . Había configurado initialRouteName="ListingDetails" que impedía el enrutamiento predeterminado.
import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import { TransitionPresets } from "@react-navigation/stack"; import ListingDetailsScreen from "../screens/ListingDetailsScreen"; import ListingsScreen from "../screens/ListingsScreen"; const Stack = createStackNavigator(); const FeedNavigator = () => ( <Stack.Navigator // initialRouteName="ListingDetails" /* Removed this line and everything worked as expected */ screenOptions={() => ({ gestureEnabled: true, headerShown: false, ...TransitionPresets.ModalPresentationIOS, })} > <Stack.Screen name="Listings" component={ListingsScreen} /> <Stack.Screen name="ListingDetails" component={ListingDetailsScreen} /> </Stack.Navigator> ); export default FeedNavigator;