Problem with useEffect()
Answered
mayank posted this in #help-forum
mayankOP
so i am making a simple fetch api will get data from "https://dummyjson.com/products" the productlist page is working find but when i added a <Link href="/">home<Link> to go back to home page it goes back to it and shows a error -> "destroy is not a function " but when i reload the page the page renders smoothly without any error
code for productlist page is
please look into it i tried chatgpt and everyhting the issue is not resolving
code for productlist page is
"use client"
import { useEffect,useState } from "react"
import Link from "next/link";
export default function page() {
const [product,setProduct] = useState([])
const [loading,setLoading] = useState(true)
useEffect(async() =>{
try{
let data = await fetch("https://dummyjson.com/products");
data = await data.json();
setProduct(data.products);
setLoading(false)
}catch(error){
console.error(error);
setLoading(false)
}
},[])
if(loading){
return <div>Loading...</div>; // loading state is true when the component loads for first time and then it will be false after fetching all
}
return (
<>
<div>
<center><h1>Productlist</h1></center>
{
product.map((items) => (
<h3 key={items.id}>{items.title}</h3>
))
}
<Link href="/" as="/">home</Link>
</div>
</>
)
}please look into it i tried chatgpt and everyhting the issue is not resolving
Answered by Naeemgg
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
export default function Page() {
const [product, setProduct] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(()=>{async function fetchData(){
try {
let data = await fetch("https://dummyjson.com/products");
data = await data.json();
setProduct(data.products);
setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}}
fetchData()
}, []);
if (loading) {
return <div>Loading...</div>; // loading state is true when the component loads for first time and then it will be false after fetching all
}
return (
<>
<div>
<center>
<h1>Productlist</h1>
</center>
{product.map((items) => (
<h3 key={items.id}>{items.title}</h3>
))}
<Link href="/" as="/">
home
</Link>
</div>
</>
);
}12 Replies
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
export default function Page() {
const [product, setProduct] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(()=>{async function fetchData(){
try {
let data = await fetch("https://dummyjson.com/products");
data = await data.json();
setProduct(data.products);
setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}}
fetchData()
}, []);
if (loading) {
return <div>Loading...</div>; // loading state is true when the component loads for first time and then it will be false after fetching all
}
return (
<>
<div>
<center>
<h1>Productlist</h1>
</center>
{product.map((items) => (
<h3 key={items.id}>{items.title}</h3>
))}
<Link href="/" as="/">
home
</Link>
</div>
</>
);
}Answer
Now it'd work fine
It is not recommended to utilize an async function directly in 'useEffect' like you did.
If you must, create an async function within it and invoke it immediately following the declaration, as I did.
If you must, create an async function within it and invoke it immediately following the declaration, as I did.
mayankOP
ok thanks
You may rename this query "problem with useEffect" or something similar. simply because it is evident
mayankOP
ok thanks bro @Naeemgg
i think i cannot rename this query
click on 3 dots located at top right corner then "edit post"
mayankOP
thanks