Почему я получаю TypeError: Невозможно прочитать свойство 'map' из неопределенного

Question

Я новичок, чтобы среагировать, и я столкнулся с этой проблемой.

Вот мой код:

import React, { Fragment } from 'react'
import Carousel from '@brainhubeu/react-carousel'
import Modal from 'react-responsive-modal'

class ReactCarousel extends React.Component {

     constructor () {
        super()
        this.state = {
          isOpen: false
        }
        this.openModal = this.openModal.bind(this)
      }

    openModal (id) {
        this.setState({
           isOpen: {
              [id]: true
           }
        });
     }

    state = {
        images : [
            { 
                id: 1,
                url: '/img/covers/01.erikssonfurunes.png', 
                fullWidthImgURL: '/img/full/01.erikssonfurunes_full.jpeg',
                client: 'Eriksson Furunes',
                type: 'Wordpress Development' 
            },
            {
                id: 2,
                url: '/img/covers/02.bruce_fordyce_after_party.png',
                fullWidthImgURL: '/img/full/02.bruce_fordyce_after_party_full.jpg',
                client: 'Bruce Fordyce After Party',
                type: 'Facebook Cover Photo Design' 
            },
            { 
                id: 3,
                url: '/img/covers/03.crmworks_asia.png',
                fullWidthImgURL: '/img/full/03.crmworks_asia_full.jpg',
                client: 'CRMWorks ASIA',
                type: 'Design & Joomla Development' 
            },
            { 
                id: 4,
                url: '/img/covers/04.devtac.png',
                fullWidthImgURL: '/img/full/04.devtac_full.jpg',
                client: 'DEVTac',
                type: 'Logo Design' 
            },
            { 
                id: 5,
                url: '/img/covers/05.direwolf.png',
                fullWidthImgURL: '/img/full/05.direwolf_full.jpg',
                client: 'Direwolf',
                type: 'Illustration' 
            },
            { 
                id: 6,
                url: '/img/covers/06.intechsive_software_development.png',
                fullWidthImgURL: '/img/full/06.intechsive_software_development_full.jpg',
                client: 'Intechsive Software Development',
                type: 'Web Design' 
            },
            { 
                id: 7,
                url: '/img/covers/07.talbase.png',
                fullWidthImgURL: '/img/full/07.talbase_dashboard_consultant_full.jpg',
                client: 'Talbase',
                type: 'UI Design' 
            }
        ]
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    render() {
        return (
            <Fragment>
                <div className="carousel">
                    <Carousel
                        slidesPerScroll={2}
                        slidesPerPage={2}
                        infinite
                        animationSpeed={5000}
                        arrowLeft={<i className="fi-xwllxl-chevron-wide"></i>}
                        arrowRight={<i className="fi-xwlrxl-chevron-wide"></i>}
                        addArrowClickHandler
                        keepDirectionWhenDragging
                        clickToChange
                        breakpoints={{
                        1280: { 
                            slidesPerPage: 2,
                            slidesPerScroll: 2
                        },
                        1024: {
                            slidesPerPage: 1,
                            slidesPerScroll: 1,
                        },
                    }}
                >
                    {this.state.images.map(({ id, url, fullWidthImgURL, client, type }) => (
                    <div key={id}> 
                        <a className="pr-0 pl-16" onClick= {this.openModal.bind(this, id)}>
                            <img src={url} className="coral-red-shadow" alt={client + " | " + type} />
                            <h1 className="mt-6 client-heading fade-in">{client}</h1>
                            <p className="fade-in">{type}</p>
                        </a>    
                        <Modal isOpen={this.state.isOpen[id]}>
                            <img src={fullWidthImgURL} alt={client + " | " + type} />
                        </Modal> 
                    </div>          
                    ))}
                    </Carousel>   
                </div>     
            </Fragment>
        )
    }
}

export default ReactCarousel

Я использую этот пакет: https://www.npmjs.com/package/react-responsive-modal

Любая помощь очень ценится.

Lorem ipsum dolor sit amet, consitteur adipiscing elit. Совершено c Гравида седь арку витае фаретра. Morbi egestas lorem ne c ante gravida, ut congue enim cursus. Quisque ex magna, aliquet sit amet turpis sed, dapibus sodales orci. Crasse molst ie Масса матового вененатиса. Изысканный вариус пыток и соды семпер. Морис на фелис ​​дуй. Nulla facilisi. Выполнено c Ультикулы в аликвоте.

Vivamus ut magna finibus neque interdum placerat sed non ligula. Nulla eget felis fermentum, sodales diam vel, bibendum sapien. Готово c imperdiet magna eu nulla auctor scelerisque. Nam malesuada magna id eros placerat aliquet. Vivamus dignissim blandit turpis vitae sollicitudin. Совершено c fringilla, lacus a c iaculis rhoncus, ex dolor volutpat lectus, в finibus purus ipsum не ex. Proin tincidunt elit ne c exmodo iaculis. Nullam luctus auctor libero in laoreet. Cras luctus efficitur tellus, eleifend vehicleula enim imperdiet sit amet. Pellentesque non purus ornare, sodales elit sed, vehicleula augue.

Answer 1

Вы должны проверить, не является ли ваш объект неопределенным, как

массив? .Map ()

здесь this.state.images? .Map ()

Надеюсь эта помощь.

Answer 2

определение атрибута состояния дважды

Вы удаляете данные из состояния, поскольку вы определяете его дважды. Один раз в контроллере this.state = ... и один раз в классе state = { images....

шанс вашего состояния к этому

state = {
  isOpen: false,
  images: [...
}

И удалите его из контроллера.