Apisauce returns undefined often

React Native
1

The following code is basically taken directly from the networking lecture but pared down to prove an issue, without the conditional when rendering the flatlist below, the program often crashes because the array is empty so the listings return undefined. The console.log function after the await call in the loadListings consistently returns data.

It took me a long time to figure this out, wasn’t sure if it was because the provided code was 10 revs behind which has been rather frustrating.

 import React from "react";
 import { Text,FlatList, StyleSheet, View, Image } from "react-native";
 import apiClient from "../assets/client";
 import { useState, useEffect } from "react";

 function ListingsScreen() {
  const [listings, setListings] = useState([]);
  useEffect(()=>{
  loadListings()
  }, [])
  const loadListings = async () =>{
  const response = await apiClient.get('/listings');
  setListings(response.data)
  console.log(response.data)
 }

 return (

<View>
  
 {listings.length>0 &&  <FlatList
     data={listings}
     keyExtractor={(listing) => listing.id.toString()}
     renderItem={({ item }) => (
  <Image style={styles.image} source={{uri:item.images[0].url}} />
   )}
 />}
</View>
  );
 }

  const styles = StyleSheet.create({
        screen: {
         padding: 20,

         },
    image:{height:100,
          weight:100,}
           });

       export default ListingsScreen;