TypeError: Failed to fetch API . react native

Question

I got a typeerror while trying to render the website contents in my App

import React ,{useState,useEffect} from "react";
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default function Home(){
    const [data,setData]= useState([{}]);
    useEffect(()=>{
        fetch('https://corona.askbhunte.com/api/v1/data/nepal')
        .then((response) => response.json())
        .then((data)=> setData(data))
        .catch((error) => alert(error));
    },[])
    
    return(
        
        <View> 
           <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.tested_positive}</Text>
          )}
        />
          
        </View>
    )
}

I want to fetch data from a website in my app. The screen renders but it does not fetch any data.

And what is the error? Can you update your question to include the full error message and any accompanying stacktrace? — Drew Reese
– Drew Reese, Commented Jul 22, 2021 at 8:34
it says: TypeError: Failed to fetch. the home screen renders. but it does not show any data — arpandhakal
– arpandhakal, Commented Jul 22, 2021 at 8:35
So I guess you investigate why it failed to fetch? What do you find when you check the network tab in the browser's dev tools for this GET request? — Drew Reese
– Drew Reese, Commented Jul 22, 2021 at 8:37
The response from "corona.askbhunte.com/api/v1/data/nepal" is an object, not an array, and I see no nested array data either. — Drew Reese
– Drew Reese, Commented Jul 22, 2021 at 8:39
the api response is in json format and its not an array. so you really don't need a flatlist to render it (pretty sure you can't render objects with flatlist). try <Text>{item.tested_positive}</Text>. — punjira
– punjira, Commented Jul 22, 2021 at 8:41

Drew Reese · Accepted Answer · 2021-07-22 08:49:43Z

1

I suspect because of the quasi-initialized state that and error is thrown on the initial render when item.tested_positive is attempted to be render from an empty object ({}).

It turns out that the response isn't even an array, it's an object.

{
  "tested_positive": 274869,
  "tested_negative": 1925081,
  "tested_total": 2199950,
  "in_isolation": 870,
  "quarantined": 56,
  "tested_rdt": 312402,
  "pending_result": 0,
  "recovered": 270987,
  "deaths": 3012,
  "source": "https://drive.google.com/file/d/1jt0EU0mrmfHK9k5gzgKxgD5VdMpXAVRO/view",
  "updated_at": "2021-03-09T00:00:00.000Z",
  "latest_sit_report": {
    "type": "MOHP",
    "_id": "5f8ec6b9b086da747e3e7ce9",
    "no": 253,
    "date": "2020-10-19",
    "url": "https://drive.google.com/file/d/1jt0EU0mrmfHK9k5gzgKxgD5VdMpXAVRO/view",
    "created_at": "2020-10-20T11:15:05.888Z",
    "updated_at": "2020-10-20T11:15:05.888Z",
    "__v": 0
  }
}

Fix the initial state and render the data directly.

export default function Home() {
  const [data, setData] = useState({}); // <-- just an object
  useEffect(() => {
    fetch('https://corona.askbhunte.com/api/v1/data/nepal')
      .then((response) => response.json())
      .then((data)=> setData(data))
      .catch((error) => alert(error));
  },[])
    
  return(
    <View> 
      <Text>{data.tested_positive}</Text> // <-- render from data
    </View>
  );
}

answered Jul 22, 2021 at 8:49

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arpandhakal Over a year ago

thanks but are there any cons of rendering data directly instead of using an array?

Drew Reese Over a year ago

@arpandhakal Cons, none I can think of. It's more work to pack the non-array data into an array and then map it. It's rather pointless if there's only one "element" to save, access, and render.

Collectives™ on Stack Overflow

TypeError: Failed to fetch API . react native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related