Encountering the following error message: SyntaxError: Unexpected end of JSON input
https://i.stack.imgur.com/ivG2e.png
Modifying the code causes the page to endlessly load without stopping
Utilizing Next.js for development
The API directory being used is api/CreateComment
Code snippet for creating a comment:
export default async function CreateComment(req, res){
const { name, comment, _id } = JSON.parse(req.body)
console.log( name, comment, _id )
await client.config({
token: process.env.SANITY_AUTH_TOKEN
}).create({
_type: "comment",
name,
comment,
blog:{
_type: "reference",
_ref: _id
},
})
return res.status(200)
}
Despite the stated error, comments are successfully fetched and stored in the backend. The issue lies in the inability to retrieve them for display.
https://i.stack.imgur.com/B1MRK.png
When running a console.log, the above image showcases the object being returned
However, attempting to fetch them from the frontend using the command below renders no results:
{JSON.stringify(comment)}
The output displayed in my slug.js file after executing the above command is not as expected
https://i.stack.imgur.com/4PPoI.png
Using comment.name or comment[0].name results in retrieving an undefined value
Responding to comments:
Code for the form section:
function Form({ _id }) {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
fetch('/api/CreateComment', {
method: "POST",
body: JSON.stringify({ ...data, _id })
})
}
return (<>
<form id='my-form' onSubmit={handleSubmit(onSubmit)}>
<div data-aos='fade-right' data-aos-delay='100' className="overflow-hidden mt-8 mb-4 w-[90vh] mx-auto bg-gray-100 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600">
<label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label>
<input {...register('name', { required: true })} type="text" id="name" className="mb-2 radius block p-2 w-full text-gray-900 bg-gray-50 rounded-lg border-gray-300 sm:text-xs dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white" minLength={3} placeholder="Your Name" />
{errors.name && <p className='text32'>Name is required. Minimum length should be 3</p>}
<div className="py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800" >
<label htmlFor="comment" className="sr-only">Your comment</label>
<textarea {...register('comment', { required: true })} id="comment" rows="4" minLength={5} className="px-0 w-full text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400" placeholder="Write a comment..."></textarea>
{errors.comment && <p className='text32'>Minimum Comment length should be 5</p>}
</div>
<div className="flex justify-between items-center py-2 px-3 border-t dark:border-gray-600">
<button onClick={notify} type="submit" data-aos='fade-up' data-aos-delay='400' className="btnz inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
Post comment
</button>
</div>
</div>
</form>
<p data-aos='fade-left' data-aos-delay='700' className="h-[8vh] w-[70vh] m-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="#" className="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
</>
);
}