reactjs - 为什么我收到 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 sit amet, consectetur adipiscing elit。Donec gravida sed arcu vitae pharetra。Morbi egestas lorem nec ante gravida, ut congue enim cursus。Quisque ex magna, aliquet sit amet turpis sed, dapibus sodales orci。Cras molestie massa a mattis venenatis。Quisque varius tortor a enim sodales semper。毛里斯在felis dui。Nulla facilisi。Donec ultricies eu nisl aliquet。

Vivamus ut magna finibus neque interdum placerat sed non ligula。Nulla eget felis balloonum、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 efficitur tellus, eleifend vehicula enim imperdiet sat amet。Pellentesque non purus ornare，sodales elit sed，vehicula augue。

标签： reactjsloopsmodal-dialogcarousel

Answer 1

两次定义状态属性

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

机会你的状态到这个

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

并将其从控制器中移除。