OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

'Error fetching data: TypeError: setApodData is not a function at fetchData' New react dev

  • Thread starter Thread starter Shaughn
  • Start date Start date
S

Shaughn

Guest
im in need of some react help. I currently work as a backend developer but ive recently been trying to get into some front end work. So im just try to build a small project using some NASA Api's with a Spring boot backend and react frontend. My backend is working find. but being realitivly new to frontend im having some troubles. When i start up my server i get the proper backend response but i get an error from my front end telling me that 'setApodData' is not a function and theres just a blank white page. ive added logs to see where it breaks and it seems after the 'console.log("after await");' log it stops and throws the setApodData is not a function error ive been searching and using all the AI's to try to find a soultion and everywhere i look it tells me that my code looks correct. the code i attached below is using react with the materialUI library. I will also attach the console logs and network logs. I have attached code and screenshots below. The backend is being called fine. Im really scratching my head. if you need any additional info let me know. Thanks!

Code:
import React,{useEffect,useState} from "react";
import { Card, CardContent,CardMedia, Typography } from "@mui/material";


const ApodCard = () =>{
    const  {apodData, setApodData} = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try{
                console.log("before response");
                const response = await fetch('http://localhost:8080/get-apod');
                console.log("after response");
                if(!response.ok){
                    throw new Error('HTTP error!, Status: ${response.status}');
                }
                console.log("before await");
                const data = await response.json();
                console.log("after await");
                setApodData(data);
                console.log("after setApodData");
                console.log("Fetched data:", data);
            }catch(error){
                console.error('Error fetching data: ', error);
            }
        };
        fetchData();
    },
   [] );

   return(
    apodData && (
        <Card>
        {apodData.media_type === 'image' ? (
          <CardMedia
            component="img"
            image={apodData.hdurl}
            alt={apodData.title}
          />
        ):(<CardContent></CardContent>)}


        </Card>
    )
   )
};
export default ApodCard;

Console Network tab

ive added logs to see where it breaks and it seems after the 'console.log("after await");' log it stops and throws the setApodData is not a function error ive been searching and using all the AI's to try to find a soultion and everywhere i look it tells me that my code looks correct.

<p>im in need of some react help. I currently work as a backend developer but ive recently been trying to get into some front end work. So im just try to build a small project using some NASA Api's with a Spring boot backend and react frontend. My backend is working find. but being realitivly new to frontend im having some troubles. When i start up my server i get the proper backend response but i get an error from my front end telling me that 'setApodData' is not a function and theres just a blank white page. ive added logs to see where it breaks and it seems after the 'console.log("after await");' log it stops and throws the setApodData is not a function error ive been searching and using all the AI's to try to find a soultion and everywhere i look it tells me that my code looks correct. the code i attached below is using react with the materialUI library. I will also attach the console logs and network logs. I have attached code and screenshots below. The backend is being called fine. Im really scratching my head. if you need any additional info let me know. Thanks!</p>
<pre><code>import React,{useEffect,useState} from "react";
import { Card, CardContent,CardMedia, Typography } from "@mui/material";


const ApodCard = () =>{
const {apodData, setApodData} = useState(null);

useEffect(() => {
const fetchData = async () => {
try{
console.log("before response");
const response = await fetch('http://localhost:8080/get-apod');
console.log("after response");
if(!response.ok){
throw new Error('HTTP error!, Status: ${response.status}');
}
console.log("before await");
const data = await response.json();
console.log("after await");
setApodData(data);
console.log("after setApodData");
console.log("Fetched data:", data);
}catch(error){
console.error('Error fetching data: ', error);
}
};
fetchData();
},
[] );

return(
apodData && (
<Card>
{apodData.media_type === 'image' ? (
<CardMedia
component="img"
image={apodData.hdurl}
alt={apodData.title}
/>
):(<CardContent></CardContent>)}


</Card>
)
)
};
export default ApodCard;
</code></pre>
<p><a href="https://i.sstatic.net/ru1jLCkZ.png" rel="nofollow noreferrer">Console</a>
<a href="https://i.sstatic.net/4a18X55L.png" rel="nofollow noreferrer">Network tab</a></p>
<p>ive added logs to see where it breaks and it seems after the 'console.log("after await");' log it stops and throws the setApodData is not a function error ive been searching and using all the AI's to try to find a soultion and everywhere i look it tells me that my code looks correct.</p>
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
S
Replies
0
Views
1
Sikandra
S
Top