I'm learning React Native and I'm trying to render some data out of my API in a Flatlist. But when I do this, Flatlist won't get my data.

This is what my API returns:

[
    {
        "favorites": [
            {
                "id": 1,
                "duration": "15 min.",
                "priceRating": 1,
                "persons": 2,
                "receiptInfo": {
                    "id": 1,
                    "name": "Test 1",
                    "description": "ffewfwfwe weg",
                    "photoTumb": "--",
                    "photo": "--"
                },
                "user": {
                    "id": 1,
                    "first_name": "--",
                },
                "rating": {
                    "id": 1,
                    "rating_average": 3.0,
                },
                "nutrition": {
                    "id": 1,
                },
                "ingredientList": [
                    {
                        "id": 1,
                        "amount": 123.0,
                        "product": {
                            "id": 1,
                        },
                        "amount_unit": {
                            "id": 1,
                        }
                    }
                ],
                "categoryList": [
                    {
                        "id": 2,
                    }
                ]
            }
        ]
    }
]

This is my Flatlist: (The receiptsView returns the API data above) (I also already tried receiptsView.favorites)

            <FlatList
                data={receiptsView[0].favorites}
                keyExtractor={(item) => `${item.id}`}
                renderItem={renderItem}
                contentContainerStyle={{
                    paddingHorizontal: SIZES.padding * 2,
                    paddingBottom: 30,
                }}
            />

My Error:

TypeError: undefined is not an object (evaluating 'receiptsView[0]')

How ReceiptsView is created:

const [receiptsView, setReceiptsView] = React.useState();

useEffect(() => {
        setLoading(true);
        handleData();
    }, []);

    async function handleData() {
        let AuthKey = await SecureStore.getItemAsync("key");
        if (AuthKey) {
            fetch(API.NL   "/favorites.json", {
                method: "GET",
                headers: {
                    Authorization: "Token "   AuthKey.toString(),
                },
            })
                .then((response) => response.json())
                .then((data) => {
                    setReceipts(data);
                    setReceiptsView(data);
                    setLoading(false);
                })
                .catch((error) => {
                    console.log(error);
                });
        } else {
            navigation.dispatch(StackActions.replace("Landing"));
        }
    }

CodePudding user response：

The problem is that your handleData function is async and receiptsView is still undefined when useEffect finished. Try to make it async as well

useEffect(() => {
        setLoading(true);
        (async () => {
            await handleData();
        })();
    }, [])