Home > Blockchain >  React Native Uncaught TypeError: Cannot read properties of undefined problems
React Native Uncaught TypeError: Cannot read properties of undefined problems

Time：07-25

I'm having difficulty viewing the data coming from the API link. I want to get some data from inside the "meals" object in the JSON file, but I see undefined in the console output.

There is no problem with pulling data, but I can't just split the "meals" object.

In the previous pages my method was working but now I am facing the problem.

useFetch.js

import React, { useEffect, useState } from "react";
import axios from "axios";


const useFetch = (url) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);

    const fetchData = async () => {
        try{
            const response = await axios.get(url);
            setData(response.data);
            setLoading(false);
        }
        catch(err){
            setLoading(false);
            setError(err.message);
            
        }
    
    };
    useEffect(() => {
        fetchData();
    }, []);
    return{ data, loading, error};
} 
export default useFetch;

detailMeal.js (Page)

import React from "react";
import { View,Text } from "react-native";

import useFetch from "../../hooks/useFetch/useFetch";

import Style from "./detailMeal.stil";

import DetailCard from "../../components/detailCard/detailCard";

const DetailMeal = ({ route }) =>{

    const id = route.params;
    
    const {data:{meals}, loading,error} = useFetch("https://www.themealdb.com/api/json/v1/1/lookup.php?i=" id);
    console.log(meals);

    return(
        <View style={Style.container}>
            <DetailCard 
            imageURL={meals.strMealThumb} 
            title={meals.strMeal} 
            desc={meals.strInstructions}/>
        </View>
    );
};

export default DetailMeal;

output

console.log(meals)// undefined

Error Message

detailMeal.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'strMealThumb')
    at DetailMeal (detailMeal.js:22:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22779:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at discreteUpdates$1 (react-dom.development.js:22420:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5889:1)
DetailMeal @ detailMeal.js:22
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
index.js:1 The above error occurred in the <DetailMeal> component:

    at DetailMeal (http://localhost:19006/static/js/bundle.js:80667:20)
    at StaticContainer (http://localhost:19006/static/js/bundle.js:9226:16)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at SceneView (http://localhost:19006/static/js/bundle.js:9116:21)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at Background (http://localhost:19006/static/js/bundle.js:12910:20)
    at Screen (http://localhost:19006/static/js/bundle.js:14088:107)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:51789:23)
    at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:51986:23)
    at SafeAreaProviderCompat (http://localhost:19006/static/js/bundle.js:14031:23)
    at NativeStackView (http://localhost:19006/static/js/bundle.js:14436:20)
    at NativeStackNavigator (http://localhost:19006/static/js/bundle.js:14369:17)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at BaseNavigationContainer (http://localhost:19006/static/js/bundle.js:8540:27)
    at ThemeProvider (http://localhost:19006/static/js/bundle.js:15262:20)
    at NavigationContainerInner (http://localhost:19006/static/js/bundle.js:14706:25)
    at App
    at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:22055:83)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at AppContainer (http://localhost:19006/static/js/bundle.js:52540:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
detailMeal.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'strMealThumb')
    at DetailMeal (detailMeal.js:22:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22779:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at discreteUpdates$1 (react-dom.development.js:22420:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5889:1)
DetailMeal @ detailMeal.js:22
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at http://localhost:19006/static/js/bundle.js:53848:34
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at TouchableOpacity (http://localhost:19006/static/js/bundle.js:60238:29)
    at CategoryButton (http://localhost:19006/static/js/bundle.js:80184:20)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at VirtualizedListCellContextProvider (http://localhost:19006/static/js/bundle.js:72852:23)
    at CellRenderer (http://localhost:19006/static/js/bundle.js:74321:36)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at http://localhost:19006/static/js/bundle.js:55897:24
    at <anonymous> (http://localhost:19006/static/js/bundle.js:20743:37)
    at ScrollView
    at VirtualizedListContextProvider (http://localhost:19006/static/js/bundle.js:72828:24)
    at VirtualizedList (http://localhost:19006/static/js/bundle.js:73245:34)
    at FlatList (http://localhost:19006/static/js/bundle.js:71321:34)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at Detail (http://localhost:19006/static/js/bundle.js:80574:20)
    at StaticContainer (http://localhost:19006/static/js/bundle.js:9226:16)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at SceneView (http://localhost:19006/static/js/bundle.js:9116:21)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at Background (http://localhost:19006/static/js/bundle.js:12910:20)
    at Screen (http://localhost:19006/static/js/bundle.js:14088:107)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:51789:23)
    at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:51986:23)
    at SafeAreaProviderCompat (http://localhost:19006/static/js/bundle.js:14031:23)
    at NativeStackView (http://localhost:19006/static/js/bundle.js:14436:20)
    at NativeStackNavigator (http://localhost:19006/static/js/bundle.js:14369:17)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at BaseNavigationContainer (http://localhost:19006/static/js/bundle.js:8540:27)
    at ThemeProvider (http://localhost:19006/static/js/bundle.js:15262:20)
    at NavigationContainerInner (http://localhost:19006/static/js/bundle.js:14706:25)
    at App
    at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:22055:83)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at AppContainer (http://localhost:19006/static/js/bundle.js:52540:24)
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23914
scheduleUpdateOnFiber @ react-dom.development.js:21840
dispatchAction @ react-dom.development.js:16139
load @ index.js:271
onDecode @ index.js:128
Promise.then (async)
image.onload @ index.js:137
load (async)
load @ index.js:125
(anonymous) @ index.js:270
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
VM841:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)
4043 @ VM841:2
r @ VM841:2
8048 @ VM841:2
r @ VM841:2
8641 @ VM841:2
r @ VM841:2
(anonymous) @ VM841:2
(anonymous) @ VM841:2
(anonymous) @ VM841:2
e.onload @ index.js:1
be @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
load (async)
be @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
Promise.then (async)
(anonymous) @ index.js:1
(anonymous) @ index.js:1
t @ index.js:1
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
error (async)
o @ index.js:1
(anonymous) @ index.js:1
ge @ index.js:1
../../../AppData/Roaming/npm/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:45
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
1 @ detailMeal.stil.js:3
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    at VirtualizedList (http://localhost:19006/static/js/bundle.js:73245:34)
    at FlatList (http://localhost:19006/static/js/bundle.js:71321:34)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at Detail (http://localhost:19006/static/js/bundle.js:80574:20)
    at StaticContainer (http://localhost:19006/static/js/bundle.js:9226:16)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at SceneView (http://localhost:19006/static/js/bundle.js:9116:21)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at Background (http://localhost:19006/static/js/bundle.js:12910:20)
    at Screen (http://localhost:19006/static/js/bundle.js:14088:107)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:51789:23)
    at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:51986:23)
    at SafeAreaProviderCompat (http://localhost:19006/static/js/bundle.js:14031:23)
    at NativeStackView (http://localhost:19006/static/js/bundle.js:14436:20)
    at NativeStackNavigator (http://localhost:19006/static/js/bundle.js:14369:17)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:8907:23)
    at BaseNavigationContainer (http://localhost:19006/static/js/bundle.js:8540:27)
    at ThemeProvider (http://localhost:19006/static/js/bundle.js:15262:20)
    at NavigationContainerInner (http://localhost:19006/static/js/bundle.js:14706:25)
    at App
    at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:22055:83)
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at div
    at http://localhost:19006/static/js/bundle.js:60680:25
    at AppContainer (http://localhost:19006/static/js/bundle.js:52540:24)

json api link: https://www.themealdb.com/api/json/v1/1/lookup.php?i=52772

CodePudding user response：

Here the initial data state is set to empty array:

const [data, setData] = useState([]);

useEffect is triggered after component is mounted, therefore data is still empty at the beginning.

Here you destruct 'meals' prop from empty array, which results in undefined falue.

const {data:{meals}, loading,error} = useFetch(...

Would suggest that you handle initial empty array/state, before data is loaded from API

Page link：https//www.codepudding.com/Blockchain/487146.html

Prev:How to set nested data values of non-objects in firebase?
Next:Correct way of rendering a React Native component
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding