“无法读取未定义的属性‘映射’”，即使我明确告诉它如果数组未定义则不要运行 function

Question

I'm using React to display an array of images. The image URLS are being retrieved from a database so I'm expecting them not to be there immediately, once loaded they're being passed as props to this component.

To prevent this causing an error I used two short circuit operators to prevent the map running if the array is undefined, but the function is still running and returning Cannot read property 'map' of undefined. Any ideas why? Sometimes it works when I refresh the page.

{
    images !== undefined && images.length > 1 &&
        <React.Fragment>
            <ImageCarouselBtnForward icon={ faChevronRight } onPointerDown={() => incrementer(images, activeImage, '+')}/>
            <ImageCarouselBtnBack icon={faChevronLeft} onPointerDown={() => incrementer(images, activeImage, '-')}/>
            <ImageCarouselSlideIndicatorGroup>
                    {
                        images !== undefined &&
                        images.map((e, idx) => (
                            <ImageCarouselSlideIndicator 
                                idx={idx} 
                                activeImage={activeImage} 
                                arrLength={images.length} 
                                onPointerDown={() => incrementer(images, activeImage, null, idx)}
                            />
                        ))
                    }
           </ImageCarouselSlideIndicatorGroup>
       </React.Fragment>
}

Any help is greatly appreciated.

Answer 1

Try images.= undefined.

Or initialize images with []. and you do not have to put that undefined check. You just need images.length check.

Answer 2

As a work around I moved the short circuit up to the parent element to prevent the entire component rendering until the image array is available.

To fix the original issue I initialised images as an empty array.