Javascript 我试图映射一个对象以显示对象属性，但我所做的只是导致信息填充4次

我有一个具有属性的upcomingEvent对象。我正在尝试迭代这些属性以在浏览器中显示它们。我遇到的问题是，它用地图中的信息填充浏览器4次。任何帮助都将不胜感激。 以下是事件页面的主要组成部分：

import React, { useState } from 'react'
import BasicCard from 'pages/EventsPage/EventsCard/index'
import UpcomingEvent from 'pages/EventsPage/UpcomingEvent/UpcomingEvent'
import UpcomingShowFlyerMobile from 'assets/images/flyer-mobile.png'
import EventsHeroImage from 'assets/images/events-hero-image.jpg'
import EventsHeroImageMobile from 'assets/images/events-mobile-hero-image.jpeg'
import { Grid } from '@material-ui/core'
import useStyles from './styles'

const UPCOMINGEVENT = {
  month: 'JAN',
  day: '24th',
  title: 'WINTER 2020 SHOWCASE',
  time: '6:00PM',
  location: 'THE IRENIC, SAN DIEGO',
  about:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur cursus nunc faucibus justo enim, eget dignissim lacus turpis. Tincidunt sed mauris in volutpat. Sapien fringilla libero, facilisis elementum nisi lobortis amet porttitor. Velit risus diam sit feugiat velit enim et, euismod quis.',
}

// const UPCOMINGEVENT = null

const EventsPage = () => {
  const classes = useStyles()
  const [events, setEvents] = useState(EVENTS)

  const [upcomingEvent, setUpcomingEvent] = useState(UPCOMINGEVENT)
  return (
    <div>
      {/*-------------Mobile View--------------------- */}
      <Grid
        container
        direction='column'
        justify='center'
        alignItems='center'
        spacing={0}
        className={classes.allContainerMobile}
      >
        <div
          className={
            !upcomingEvent
              ? classes.headingContainerMobile
              : classes.headingContainerMobileUpcomingShow
          }
        >
          <div>
            <p className={classes.allEventsTitleMobile}>ALL EVENTS</p>
          </div>
          {upcomingEvent === null ? (
            <div>
              <div className={classes.parentDivImageMobile}>
                <div className={classes.ImageDivMobile}>
                  <img
                    src={EventsHeroImageMobile}
                    className={classes.placeHolderImageMobile}
                  />
                </div>
              </div>
            </div>
          ) : (
            <div>
              <Grid item sm={12} className={classes.gridMobile}>
                <div className={classes.countdownContainerMobile}>
                  <div className={classes.countdownParentMobile}></div>
                </div>
              </Grid>
            </div>
          )}
          <div>
            <p
              className={
                upcomingEvent
                  ? classes.upcominShowMobileUpcomingEvent
                  : classes.upcomingShowMobile
              }
            >
              UPCOMING SHOW
            </p>
          </div>
          {upcomingEvent === null ? (
            <div>
              <div>
                <p className={classes.noUpcomingShowsMobile}>
                  NO UPCOMING SHOWS...FOR NOW.
                </p>
              </div>
            </div>
          ) : (
            <div>
              <div className={classes.flyerImageMobile}>
                <div className={classes.upcomingShowParentMobile}>
                  <img
                    src={UpcomingShowFlyerMobile}
                    className={classes.imageStyleMobile}
                  />
                </div>
              </div>
            </div>
          )}
        </div>

        {upcomingEvent !== null && (
          <div>
            {Object.entries(upcomingEvent).map(([key, data]) => (
              <UpcomingEvent
                key={key}
                title={upcomingEvent.title}
                day={upcomingEvent.day}
                month={upcomingEvent.month}
                time={upcomingEvent.time}
                location={upcomingEvent.location}
                about={upcomingEvent.about}
              />
            ))}
            <div></div>
          </div>
        )}
        <div>
          <h2
            className={
              upcomingEvent
                ? classes.pastShowsUpcomingMobile
                : classes.pastShowsMobile
            }
          >
            PAST SHOWS
          </h2>
        </div>

        <div className={classes.eventsCardMobile}>
          {events.map(({ month, day, title, time, location }, i) => (
            <BasicCard
              key={`${title}-${i}`}
              month={month}
              day={day}
              title={title}
              time={time}
              location={location}
            />
          ))}
        </div>
      </Grid>

import React，{useState}来自“React”
从“pages/EventsPage/EventsCard/index”导入BasicCard
从“pages/EventsPage/UpcomingEvent/UpcomingEvent”导入UpcomingEvent
从“assets/images/flyer mobile.png”导入UpcomingShowFlyerMobile
从“assets/images/events hero image.jpg”导入EventsHeroImage
从“assets/images/events mobile hero image.jpeg”导入EventsHeroImageMobile
从“@material ui/core”导入{Grid}
从“./styles”导入useStyles
常数UPCOMINGEVENT={
月份：“一月”，
第24天，
标题：“2020年冬季展示”，
时间：“下午6:00”，
地点：'圣地牙哥的IRENIC'，
关于：
“Lorem ipsum door sit amet，concertetur adipist elit.concertetur cursus nunc faucibus justo enim，eget dignessim lacus turpis.tincidut sed mauris in volatip.Sapien frontilla libero，facilis elementum nis lobortis amet porttitor.Velit risus diam des sit fegiat Velit enim et，euismod quis.”，
}
//常量UPCOMINGEVENT=null
const EventsPage=（）=>{
常量类=useStyles（）
const[events，setEvents]=useState（事件）
常量[upcomingEvent，setUpcomingEvent]=使用状态（upcomingEvent）
返回(
{/*----移动视图-----------------*/}
所有事件
{upcomingEvent===null(
) : (
)}

即将到来的表演

{upcomingEvent===null(

暂时没有即将播出的节目。

) : (
)}
{upcomingEvent！==null&&(
{Object.entries（upcomingEvent）.map（[key，data]）=>(
))}
)}
过去的演出
{events.map（{month，day，title，time，location}，i）=>(
))}

这是UpcomingEvent组件

import React, { useState } from 'react'
import UpcomingShowFlyerDesktop from 'assets/images/flyer-desktop.png'
import { Grid } from '@material-ui/core'
import useStyles from '../styles'

function UpcomingShow({ title, day, month, time, location, about }) {
  const classes = useStyles()
  return (
    <div>
      <div>
        <div className={classes.upcomingShowsMobile}>
          <div className={classes.titleContainerMobile}>
            <p className={classes.upcomingShowTitleMobile}>{title}</p>
          </div>
          <div className={classes.dateLocationContainerMobile}>
            <p className={classes.upcomingShowDateLocationMobile}>
              {month} {day} |{location}
            </p>
          </div>
          <div className={classes.aboutContainerMobile}>
            <p className={classes.aboutUpcomingShowMobile}>{about}</p>
          </div>
          <div className={classes.upcomingShowButtonContainerMobile}>
            <button className={classes.upcomingShowButtonMobile}>
              BUY TICKETS
            </button>
          </div>
        </div>
      </div>
export default UpcomingShow

import React，{useState}来自“React”
从“assets/images/flyer desktop.png”导入UpcomingShowFlyerDesktop
从“@material ui/core”导入{Grid}
从“../styles”导入useStyles
函数UpcomingShow（{title，day，month，time，location，about}）{
常量类=useStyles（）
返回(
{title}

{月}{日}{地点}

{about}
买票
导出默认UpcomingShow

如果我很好地理解您的意思，您是否希望以不同的方式每次显示4次UpcomingEvent的值Compoenent@HamzaMiloud Amar我试图在upcomingEvents组件上显示对象的属性，但不是在upcomingEvent组件上调用对象的属性时仅显示一次它显示了从UpcomingEvent对象开始的所有内容6次，我猜对象中的每个属性都显示一次。这一行

{object.entries（UpcomingEvent）.map（（[key，data]）=>（…

将导致渲染组件的6个实例

UpcomingEvent

。这是正常的。如果您只需要1个，则不应使用

映射

。删除映射并只需编写：

@Ajeet Shah谢谢，我会尝试。