為什么我會收到 TypeError：無法讀取未定義的屬性“地圖”

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 坐 amet，consectetur adipiscing 精英。 Donec gravida sed arcu vitae pharetra。 Morbi egestas lorem nec ante gravida, ut congue enim cursus。 Quisque ex magna、aliquet sat amet turpis sed、dapibus sodales orci。 Cras Molestie massa a mattis venenatis。 Quisque varius Tortor a enim sodales semper。 Mauris 在 felis dui。 Nulla facilisi。 Donec ultricies eu nisl a aliquet。

Vivamus ut magna finibus neque interdum placerat sed non ligula。 Nulla eget felisfermentum、sodales diam vel、bibendum sapien。 Donec imperdiet magna eu nulla auctor scelerisque。 Nammalesuada magna id eros placerat aliquet。 Vivamus dignissim blandit turpis vitae sollicitudin。 Donec fringilla, lacus ac iaculis rhoncus, ex dolor volutpat lectus, at finibus purus ipsum non ex. Proin tincidunt elit nec ex commodo iaculis。 Nullam luctus auctor libero 在 laoreet。 Cras luctus efficiturtellus, eleifend vehicula enim imperdiet sat amet。 Pellentesque non purus ornare，sodales elit sed，vehicula augue。

Answer 1

兩次定義狀態屬性

您正在從狀態中刪除數據，因為您定義了它兩次。 一次在控制器this.state = ...一次在類state = { images... 。

機會你的狀態到這個

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

並將其從控制器中刪除。

Answer 2

您必須檢查您的對象是否未定義，例如

數組？.map()

這里 this.state.images?.map()

希望這有幫助。