TypeError: Cannot read property 'products' of undefined-CodePudding

In this below code, I get an error like this:

TypeError: Cannot read property 'products' of undefined

at ClosetSpotlightItems (E:\AAAAAA\Susty\Z\Forked for Deploy\susty-next-fronted-fork\.next\server\chunks\621.js:606:30)

can you help me to solve this error ???

I have already tried adding AND operator before the mapping ( {seller.products && seller.products.map((item) => () and also a key as well (<div key={item.id}>).

Please help me make this error fix, and also this happens when I run the build in my NEXT.js project.

import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'
const ClosetSpotlightItems = ({seller}) => {
    return (
        <>
            <ClosetSpotlightWrapper seller={seller} key={seller._id}>
                {seller.products.map((item) => (
                    <div key={item}>
                        <ClosetSpotlightItemCard item={item}/>
                    </div>
                ))}
            </ClosetSpotlightWrapper>
        </>
    )
}
export default ClosetSpotlightItems

CodePudding user response：

I would just early out the ClosetSpotlightItems function if seller is undefined. Seller is undefined in your case at some point in time.

I've also set your default export at the bottom to a named export. This prevents a lot of problems in the future for your codebase: https://basarat.gitbook.io/typescript/main-1/defaultisbad

import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'

export const ClosetSpotlightItems = ({seller}) => {
    if (seller === undefined) return null
    
    return (
        <>
            <ClosetSpotlightWrapper seller={seller} key={seller._id}>
                {seller.products.map((item) => (
                    <div key={item}>
                        <ClosetSpotlightItemCard item={item}/>
                    </div>
                ))}
            </ClosetSpotlightWrapper>
        </>
    )
}

CodePudding user response：

Do this like, Encode your Object in if Condition and check whether it have data or not

import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'
const ClosetSpotlightItems = ({seller}) => {
return (
    <>
       <ClosetSpotlightWrapper seller={seller} key={seller._id}>
            { (seller.products) && seller.products.map((item) => (
                <div key={item}>
                    <ClosetSpotlightItemCard item={item}/>
                </div>
            ))}
        </ClosetSpotlightWrapper>
    </>
)
}
export default ClosetSpotlightItems

CodePudding user response：

You can use a ? to skipp the undefined values

{
seller?.products?.map((item) => (
                <div key={item}>
                    <ClosetSpotlightItemCard item={item}/>
                </div>
            ))}