问如何有条件地呈现对象以显示一段代码(如果该对象不为空)和一段代码(如果该对象具有key: value
EN

Stack Overflow用户

提问于 2021-04-27 23:02:03

回答 2查看 145关注 0票数 0

如果即将到来的对象有数据，我会尝试呈现一段代码，如果对象没有数据，则会呈现不同的代码部分。我遇到的问题是，当对象为空时，代码中后面使用的键/值对会抛出错误。

import React, { useState } from 'react'
import BasicCard from 'pages/EventsPage/EventsCard/index'
import EventsHeroImage from 'assets/images/events-hero-image.jpg'
import EventsHeroImageMobile from 'assets/images/events-mobile-hero-image.jpeg'
import CountdownTimer from 'pages/EventsPage/CountdownTimer/CountdownTimer'
import PlaceholderUpcomingShowImageDesktop from 'assets/images/placeholder-upcomng-show-image.png'
import PlaceholderUpcomingShowImageMobile from 'assets/images/placeholder-upcomng-show-image.png'
import { Grid } from '@material-ui/core'
import useStyles from './styles'

const EVENTS = [
  {
    month: 'AUG',
    day: '09',
    title: 'SUMMER 2019 SHOWCASE',
    time: '7:30PM-9:00PM',
    location: 'The Irenic, San Diego, CA',
  },
  {
    month: 'APR',
    day: '17',
    title: 'SPRING 2019 SHOWCASE',
    time: '7:30PM-9:00PM',
    location: 'The Irenic, San Diego, CA',
  },
  {
    month: 'AUG',
    day: '09',
    title: 'FALL 2019 SHOWCASE',
    time: '7:30PM-9:00PM',
    location: 'The Irenic, San Diego, CA',
  },
  {
    month: 'APR',
    day: '17',
    title: 'WINTER 2019 SHOWCASE',
    time: '7:30PM-9:00PM',
    location: 'The Irenic, San Diego, CA',
  },
]
const UPCOMINGEVENT = {
  title: 'WINTER 2020 SHOWCASE',
  date: 'JAN 24TH',
  location: 'THE IRENIC, SAN DIEGO',
  about:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur cursus nunc faucibus justo enim, eget dignissimlacus turpis. Tincidunt sed mauris in volutpat. Sapien fringilla libero, facilisis elementum nisi lobortis amet porttitor. Velit risus diam sit feugiat velit enim et, euismodquis.',
}

const EventsPage = () => {
  const classes = useStyles()
  const [events, setEvents] = useState(EVENTS)
  const { title, date, location, about } = UPCOMINGEVENT
  const startDate = '04/23/2021'
  const endDate = '05/04/2021'
  return (
    <div>
      {/*-------------Mobile View--------------------- */}
      <Grid
        container
        direction='column'
        justify='center'
        alignItems='center'
        spacing={0}
        className={classes.allContainerMobile}
      >
        <div className={classes.headingContainerMobile}>
          <div>
            <p className={classes.allEventsTitleMobile}>ALL EVENTS</p>
          </div>
          {!UPCOMINGEVENT ? (
            <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}>
                    <CountdownTimer
                      countdown={startDate}
                      unixEndDate={endDate}
                    />
                  </div>
                </div>
              </Grid>
            </div>
          )}
          {!UPCOMINGEVENT ? (
            <div>
              <div>
                <p className={classes.upcomingShowMobile}>UPCOMING SHOW</p>
              </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={PlaceholderUpcomingShowImageMobile}
                    className={classes.imageStyleMobile}
                  />
                </div>
              </div>
            </div>
          )}
        </div>
        {UPCOMINGEVENT ? (
          <div>
            <div className={classes.upcomingShowsMobile}>
              <div className={classes.titleContainerMobile}>
                <p className={classes.upcomingShowTitleMobile}>
                  {/* {UPCOMINGEVENT.title} */}
                  {title}
                </p>
                {/* <p className={classes.upcomingShowTitleMobile}>
                  WINTER 2020 SHOWCASE
                </p> */}
              </div>
              <div className={classes.dateLocationContainerMobile}>
                <p className={classes.upcomingShowDateLocationMobile}>
                  {/* {UPCOMINGEVENT.date} | {UPCOMINGEVENT.location} */}
                  {date} | {location}
                </p>
                {/* <p className={classes.upcomingShowDateLocationMobile}>
                  JAN 24TH | THE IRENIC, SAN DIEGO
                </p> */}
              </div>
              <div className={classes.aboutContainerMobile}>
                <p className={classes.aboutUpcomingShowMobile}>
                  {/* {UPCOMINGEVENT.about} */}
                  {about}
                </p>
                {/* <p className={classes.aboutUpcomingShowMobile}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Consectetur cursus nunc faucibus justo enim, eget
                  dignissimlacus turpis. Tincidunt sed mauris in volutpat.
                  Sapien fringilla libero, facilisis elementum nisi lobortis
                  amet porttitor. Velit risus diam sit feugiat velit enim et,
                  euismodquis.
                </p> */}
              </div>
              <div className={classes.upcomingShowButtonContainerMobile}>
                <button className={classes.upcomingShowButtonMobile}>
                  BUY TICKETS
                </button>
              </div>
            </div>
          </div>
        ) : null}
        {!UPCOMINGEVENT ? (
          <div>
            <h2 className={classes.pastShowsMobile}>PAST SHOWS</h2>
          </div>
        ) : (
          <div>
            <h2 className={classes.pastShowsUpcomingMobile}>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>

我不确定我做错了什么。在这方面的任何帮助都将非常感谢。

javascript

reactjs

object

rendering

回答 2

Stack Overflow用户

发布于 2021-04-28 00:29:25

当对象为空时，它得到的值是undefined还是null？或者它得到的值长度是0？我在想你也许应该使用"Object.keys(obj).length === 0“作为条件。

票数 0

Stack Overflow用户

发布于 2021-04-28 00:31:18

您可能必须使用null而不是!UPCOMINGDATE

console.log(!{} === false);   // true
console.log(!{item: "yes"} === false); // true
console.log({item: "yes"} !== null);  // true
console.log({} === null);   // false

所以使用(UPCOMINGDATE !== NULL)然后渲染可能会有所帮助。

在dev中:值null表示有意不存在任何对象值。它是JavaScript的原始值之一，对于布尔操作，它被视为falsy。Link

简短的例子

    import React from 'react'

export default function parent() {
    const [events, setEvents] = useState(null)
React.useEffect(() => {
    getSomeData(id, Callback => {
        // Set the data here
        setEvents(callback)
    })
},[])
    // It will not render the data until its set bc its null
    // You can also map the child 
    return (
        <div>
            {events !== null ? <Child events={events}/> : null}
        </div>
    )
}




export default function Child(props) {
    return (
        <div>
            <p>props.events.title</p>
            <p>props.events.date</p>
        </div>
    )
}