react fetch return undefined while in network tab its displaying but not showing on the page

Question

Data is coming but not displaying

[ Data is showing in the consel][2]

Following is my useFetch code I just want to display the todo details

import { useEffect, useState } from "react";
const useFetch = url => {
const [data, setData] = useState([]);
useEffect(() => {
    getData();
}, []);
const getData = async () => {
    try {
        const response = await fetch(url)
        const data = await response.json();
        setData(data)
    } catch (error) {
        console.error("Error from Fetch:", error);
    }
  }
  return data;
 }
export default useFetch;

Can you console.log all the steps. And I would recommend to use react-query fur this exact use case. Check it out. — Domino987
– Domino987, Commented Feb 15, 2021 at 11:37
If there is no state updated in your compoennt, then it won't display anything when your fetch is done (If is asynchronous). You might need to add your result in a local state of your component. — Quentin Grisel
– Quentin Grisel, Commented Feb 15, 2021 at 11:41
No since the hook is used, that would trigger a state update. Even async — Domino987
– Domino987, Commented Feb 15, 2021 at 11:42

Domino987 · Accepted Answer · 2021-02-15 11:44:14Z

1

Since you are returning the todo as an object itself, you cannot extract it but use it as it is:

const todo = useFetch('http://localhost/todos/todosapi/todos/' + id);

Now you can access the properties.

If you want to destructe the return, you have to wrap the response once more:

const getData = async () => {
    try {
        const response = await fetch(url)
        const data = await response.json();
        setData(data)
    } catch (error) {
        console.error("Error from Fetch:", error);
    }
  }
  return {todo: data};
 }

To reduce the amount of calls you have to make and to cache data, check out react-query.

answered Feb 15, 2021 at 11:44

Domino987

8,8642 gold badges17 silver badges40 bronze badges

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

Comments

tichopad · Accepted Answer · 2021-02-15 11:41:12Z

1

At:

const { todo } = useFetch('http://localhost/todos/todosapi/todos/' + id);

You're trying to access property todo of the fetch response.

Based on the JSON response in the inspector network tab, it looks like there's no todo property. That might be why it is undefined.

answered Feb 15, 2021 at 11:41

tichopad

911 silver badge3 bronze badges

Collectives™ on Stack Overflow

react fetch return undefined while in network tab its displaying but not showing on the page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related