为什么会收到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 atmet，奉献自若。 Donec gravida sed arcu vita pharetra。 Morbi egestas lorem nec ante gravida，ut congue enim cursus。 Quisque ex magna，aliquet坐在amet turpis sed，dapibus sodales orci。 Cras molestie massa mattis venenatis。 Quisque varius折磨者是enim sodales semper。毛里斯在felis dui。 Nulla facilisi。 Donec ultricies eu alsl aliquet。

Vivamus ut magna finibus neque interdum placerat sed non ligula。 Nulla eget felis fermentum，sodales diam vel，bibendum sapien。 Donec imperdiet magna eu nulla auctor scelerisque。 Nam malesuada magna id eros placerat aliquet。 Vivamus dignissim blandit turpis vita sollicitudin。 Donec fringilla，accus iaculis rhoncus，ex dolor volutpat lectus，at finibus purus ipsum non ex。 Proci tincidunt elit nec ex commodo iaculis。 Nullam luctus auctor libero在laoreet。 Cras luctus efficitur tellus，eleifend vehicula enim imperdiet amet。 Pellentesque non purus ornare，sodales elit sed，vehicula augue。

Answer 1

两次定义状态属性

您正在从状态中删除数据，因为您定义了两次。一次在控制器this.state = ...中，一次在类state = { images...中。

将您的状态更改为此状态

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

并从控制器中将其删除。

Answer 2

您必须检查您的对象是否未定义如

array？.map（）

这里this.state.images？.map（）

希望获得帮助。