.map function doesn't work
Answered
Macao paper wasp posted this in #help-forum
Macao paper waspOP
Hi! I have some issues with mapping my database entries, I will include some images to see the issue.
In fetchForResult, when I return reviews2, the {reviews.map((review) => ( works fine, however, when I return 'reviews' which is returns the same objects from another script, I can't use reviews.map, why?
In fetchForResult, when I return reviews2, the {reviews.map((review) => ( works fine, however, when I return 'reviews' which is returns the same objects from another script, I can't use reviews.map, why?
Answered by Macao paper wasp
I was returning an extra object in my fetchReviews script
29 Replies
Macao paper waspOP
Inside the fetchReviews() I return the same object
@Macao paper wasp Hi! I have some issues with mapping my database entries, I will include some images to see the issue.
In fetchForResult, when I return reviews2, the {reviews.map((review) => ( works fine, however, when I return 'reviews' which is returns the same objects from another script, I can't use reviews.map, why?
how do you know, that "it does not work". Please provide more information
Macao paper waspOP
reviews.map is underlined with red and I get error or next js like this:
only differenc I find is when I hold my cursor on the two
You can see on reviews there is a | { ...; } at the end
But when I console.log the two, I get the same output
I'm fetching reviews from a function (like the one I asked before, if its safe to fetch from there), should I fetch it from a server component instead?
This is the function I fetch the data from, its the same prisma.xy.findMany function
@Macao paper wasp reviews.map is underlined with red and I get error or next js like this:
Sirex woodwasp
This usually means that it cannot find a length in it, could you show the console.log of reviews?
@Macao paper wasp You can see on reviews there is a | { ...; } at the end
yea, this is the problem. It looks like its not an array as you said
@Macao paper wasp But when I console.log the two, I get the same output
It seems like you are not getting the same output
Macao paper waspOP
I will console.log the two
@Macao paper wasp I will console.log the two
how does your fetchReviews look like?
@B33fb0n3 how does your fetchReviews look like?
Macao paper waspOP
The last picture I sent you
Maybe they are really the same value, but for a moment (because of fetching for example) one of them is null. And null does not contain .map
Macao paper waspOP
Its not a server component but a function
I think I found the problem
Sirex woodwasp
client sided?
Can you add this for your
reviews.map((...:{(reviews && reviews.length > 0) && reviews.map((...Macao paper waspOP
I was returning an extra object in my fetchReviews script
Answer
Macao paper waspOP
If I want to display database data in my pages, should I always fetch it like this, so it's not safe if I fetch db in that script?
And another question, is it better to create a route.ts for the fetching, or is it okay if I fetch from this function?
And thank you very much guys for your help!
@Macao paper wasp And another question, is it better to create a route.ts for the fetching, or is it okay if I fetch from this function?
Use SSR for fetching stuff and pass it down to your components if needed
Macao paper waspOP
Got it, thanks again @B33fb0n3 @Sirex woodwasp !
sure thing. Please mark solution