Webpage wont display information after succesfull fetch.
Unanswered
Munchkin posted this in #help-forum
MunchkinOP
I do not understand why the webpage wont display the information after fetch.
fetch(path)
.then((response) => response.json() as Promise<ApiResponse>)
.then((data) => {
setBest(data.best_match);
console.log(data.best_match);
})
.catch((error) => {
console.error('Error fetching:', error);
});
}, []);
return (
<div>
<h1>{best}</h1>
</div>
)
}
export default page`
"use client"
import React, { useEffect, useState } from 'react'
interface ApiResponse {
best_match: string;
}
const page = async ({params} : {params : {id : string}}) => {
const [best, setBest] = useState<string>("Loading...");
useEffect(() => {
const path =http://127.0.0.1:5000/api/results/?form_id=${params.id}`fetch(path)
.then((response) => response.json() as Promise<ApiResponse>)
.then((data) => {
setBest(data.best_match);
console.log(data.best_match);
})
.catch((error) => {
console.error('Error fetching:', error);
});
}, []);
return (
<div>
<h1>{best}</h1>
</div>
)
}
export default page`
1 Reply
MunchkinOP
nvm removed async from page declaration and it works