Trouble with fetch error handling in Reactjs

Question

I'm learning how to use fetch and was trying the following syntax:

const [stuff, setStuff] = useState([]);
const request = "link-to-API";

const data = await fetch(request)
    .then(response => response.json())
    .catch(err => {
      console.log(err);
      return {} //(or [], or an empty return, or any return at all)
    })

setStuff(data.hits)

Then, in the return, I have:

{stuff.map((element) => (
        <Thing
          title={element.label}
          link={element.url}
        />
      ))}

Thinking I could just render an empty object whenever my fetch fails. Except, this works only when the fetch itself works. React gives me the error

"Objects are not valid as a React child (found: TypeError: Failed to fetch)."

But I can't find any solution online. How could I handle the errors just by not rendering anything? (that's not the only part I'm rendering, I just want to render an empty div, not conditionally render that part)

Ehsan Nazeri · Accepted Answer · 2020-10-10 19:53:30Z

3

when you use await you can't use then and catch methods

It's important that you use await in async function

let data = null
try{
    const response = await fetch(request)
    data = response.json();
} catch(err)  {
      console.log(err);
    }

edited Oct 10, 2020 at 19:53

answered Oct 10, 2020 at 16:40

Ehsan Nazeri

8111 gold badge7 silver badges10 bronze badges

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

1 Comment

Praveen Over a year ago

since, its a functional component, you cannot have a random retrun statement returning nothing. the return will result in "Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

Praveen · Accepted Answer · 2020-10-10 16:50:54Z

0

you can try removing the await keyword, as you are using .then also the datafetching part should be included inside useEffect

const [stuff, setStuff] = useState([]);
const request = "link-to-API";
    
useEffect( ()=> {
    fetch(request)
    .then(response => response.json())
    .then(data => setStuff(data.hits))
    .catch(err => {console.log(err)})
},[])

edited Oct 10, 2020 at 16:50

answered Oct 10, 2020 at 16:35

Praveen

3031 silver badge7 bronze badges

1 Comment

user13884402 Over a year ago

Not returning anything gives the same problem, I'll edit the question

Collectives™ on Stack Overflow

Trouble with fetch error handling in Reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related