I have the following button that reaches out to /api/reviews/react:
"use client"
import useFetch from "@/hooks/useFetch";
import { thumbsDown, thumbsUp } from "@/public/icons";
import HTTPMethod from "http-method-enum";
import Image from "next/image";
export default function ReactOnPost({id, reactedBy, user}: {id: string, reactedBy: string[], user: string}) {
const [data, error, loading, sendFetch] = useFetch();
const hasReacted = (reactedBy: string[], user: string) => {
let didReact = false;
for (let i = 0; i < reactedBy.length; i++) {
if (reactedBy[i] === user) {
didReact = true;
break;
}
}
return didReact;
}
const reacted = hasReacted(reactedBy, user)
if (reacted) {
return <p>You already reacted. <button className="standard-clear-btn" style={{width: 50, height: 50, fontSize: "1rem"}}>Undo</button></p>
}
return (
<div className="reactions">
<Image src={thumbsUp} alt="Vote up" onClick={() => {
sendFetch ("/api/reviews/react", HTTPMethod.PATCH, {
id,
like: true,
userId: user
})
}}/>
<Image src={thumbsDown} alt="Vote down" onClick={() => {
sendFetch ("/api/reviews/react", HTTPMethod.PATCH, {
id,
like: false,
userId: user
})
}}/>
</div>
);
}
The api endpoint works fine and the data is updated however upon refreshing the page (to show the data) I get an error: Error: Maximum call stack size exceeded.
useFetch hook:
import HTTPMethod from "http-method-enum";
import { useState } from "react";
export default function useFetch() {
const [data, setData] = useState(null);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const sendFetch = async (url: string, method: HTTPMethod, body: any): Promise <any> => {
try {
setLoading(true);
const rawResponse = await fetch(url, {
method,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
body,
}),
});
const response = await rawResponse.json();
if (!response.ok) {
throw new Error(response.message)
}
setData(response);
} catch (error: any) {
console.log(error)
setError(error);
} finally {
setLoading(false);
}
};
return [data, loading, error, sendFetch];
}
FullReview parent component:
import { Stars } from "@/app/app/components";
import { ReactOnPost } from "@/app/app/components";
import { User, Review } from "@/mongo";
import { currentUser } from "@clerk/nextjs";
export default async function FullReview({ reviewData }: { reviewData: any }) {
const { title, stars, text, id, createdAt, author } = reviewData;
const signedInUser = await currentUser()
const signedInUserStore = await User.findOne ({userId: signedInUser?.id})
const user = await User.findOne({_id: author})
const review = await Review.findOne ({author})
return (
<div className="full-review">
<Stars count={stars}/>
<article>
<b>{title}:</b>
<p>{text}</p>
</article>
<hr />
<div className="actions">
<ReactOnPost id={id} reactedBy={review.reactedBy} user={signedInUserStore._id}/>
<span>
{review.likes} votes
</span>
<span className="date">
Written on {createdAt.toString()} by {user.businessName}
</span>
</div>
</div>
);
}
What’s going on here? This error only happens when I use the UI to reach the endpoint. The same call stack error doesn’t exist when I use postman to reach the endpoint.
