I am using react js and using mongo db. i am trying to get data by fetch. but i get this type of error : Uncaught (in promise) SyntaxError: Unexpected end of JSON input
const [product, setProduct] = useState({});
useEffect(() => {
const url = `http://localhost:5000/product/${id}`;
fetch(url)
.then((res) => res.json())
.then((data) => setProduct(data));
}, [id]);
Your code in useEffect is correct the reason you may be getting this error is because of
you can confirm this by replacing res.json() with res.text() and then console.log it
You should include a .catch()
call in your chain of method calls off the fetch
, so that you can handle errors or malformed input from your API. The error is saying it's "uncaught" because there is no catch
clause.
i.e.
fetch(url)
.then((res) => res.json())
.then((data) => setProduct(data))
.catch((error) => console.error("Something went wrong: ", error))