两次定义状态属性

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坐着，安全奉献精英。 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折磨者是soimale semper。毛里斯在felis dui。 Nulla facilisi。 Donec ultricies eualisl 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在劳雷埃特。 Cras luctus efficiturtellus，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（）

希望获得帮助。

为什么会收到TypeError：无法读取未定义的属性“地图”

2 个答案:

两次定义状态属性