0

I'm trying to fetch data from my Django rest framework backend in react-native but keep getting this error when the app is started in expo. I can't see anything wrong with my function promise, maybe I'm looking at it the wrong way since am new to JavaScript's.


const HomeScreen = () => {
    //const navigation = useNavigation()
  const [data, setData] = useState([])

  useEffect(() =>{
      fetchData()
   }, [])

   const fetchData = async()=>{
      const response =  await fetch('http://127.0.0.1:8000/estate-list/')
      const data = await response.json()
      setData(data)
   }

    return (
   
      <View style={styles.screen}>
        <HomeList data={data} />
      
      </View>
     
    );
}

Home screen list component


const HomeList= ({data}) => {
    const renderItem = ({item}) =>{
        return <ListItem 
        price={item.price} 
        title={item.title} 
        description={item.description} />
    }
    return (
        <View>
            <FlatList
             
             data={data}
             keyExtractor={item => item.id}
             renderItem={renderItem}
             refreshControl={
                <RefreshControl 
                refreshing= {false} 
                onRefresh={() => console.log("Refreshing.....!")} />
             }
            />
          
        </View>
    );
}

ListItem component

const ListItem = ({ id, title, description,}) => {
     const navigation = useNavigation()
    return (
        <TouchableOpacity style={styles.card} 
        onPress={() => navigation.navigate('Detail View',
         { eventId: id, title, description})}>
        
            
            <Text>{title}</Text>
            <Text>{description}</Text>
             <Button title='More Info' color={'#0f172a'} />
        </TouchableOpacity>
    );
}
Godda
  • 951
  • 1
  • 10
  • 26
  • Have you tried using catch after your promises? Take a look at this - https://stackoverflow.com/a/38843840/9545165 – tahnoon Apr 28 '23 at 14:02
  • The thing is how do I refactor that solution to work for my function component case ? – Godda Apr 28 '23 at 14:04

1 Answers1

1

It seems like the fetch request failed. Because of that the response object was undefined, thus response.json() failed too.

Try this -

const fetchData = async()=>{
  const response =  await fetch('http://127.0.0.1:8000/estate-list/').catch((error)=>{
      console.log(error);
      return;
  });
  
  if (response==undefined){
    return;
  }
  
  const data = await response.json().catch((error)=>{
      console.log(error);
  });
  setData(data)

}

If you get LOG [TypeError: Network request failed] in the console.log then the problem is with the data your API is returning.

tahnoon
  • 133
  • 1
  • 14
  • I tried working with your solution but as you said in your comment it throwed the error LOG [TypeError: Network request failed] in this case I suspect is the Host IP http://127.0.0.1:8000/estate-list/ address and expo IP address (http://192.168.100.53:19000) that's in conflict. because my API works perfectly when serializing and deserializing data. – Godda Apr 29 '23 at 14:50
  • I am not sure about that. I mocked your project on my system and it worked fine with localhost IP. – tahnoon Apr 30 '23 at 14:14