Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

React Native Uncaught TypeError: Cannot read properties of undefined problems

byMR
July 24, 2022

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading