I need your help. To figure out. What is happening ?
I have two codes very similar.
In this case, the code gives me an error: "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component."
import React from "react";
import useSWR from "swr";
const fetcher=(...args)=>fetch(...args).then((resp)=>resp.json());
const useSwrTest=(GameViewBackendGameid)=>( useSWR(
GameViewBackendGameid,
fetcher,
{
suspense:true,
}
))
function GetGameDataBackend(gameid){
const GameViewBackendGameid='/api/v2/gameview/'+gameid
const {data,error}=useSwrTest(GameViewBackendGameid);
console.log(data)
return <></>
}
export default GetGameDataBackend;
But in this case don't :
import React from "react";
import useSWR from "swr";
const fetcher=(...args)=>fetch(...args).then((resp)=>resp.json());
const useSwrTest=()=>( useSWR(
"https://dog.ceo/api/breeds/image/random",
fetcher,
{
suspense:true,
}
))
function SwrV2(){
const {data,error}=useSwrTest();
if (error) {
return <h1> There was an error!</h1>
}
return (
<div>
<img width={500} src={data.message} alt={"Text"}/>
</div>
);
}
export default SwrV2;
Why? In both cases are I am using swr inside on a function?