如果 object 不為空，我如何有條件地渲染 object 以顯示一段代碼，如果 object 有 key: value 則顯示一段代碼

Question

如果 object UPCOMING 有數據，我正在嘗試渲染一段代碼，如果 object 沒有數據，我正在嘗試渲染一段不同的代碼。 我遇到的問題是當 object 為空時，代碼中稍后使用的鍵/值對會引發錯誤。

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>

我不確定我做錯了什么。 對此的任何幫助將不勝感激。

Answer 1

當 object 為空時，它得到的值是 undefined 還是 null？ 還是它的值長度為 0？ 我想你也許應該使用“Object.keys(obj).length === 0”作為條件。

Answer 2

你可能不得不使用 null 而不是 !UPCOMINGDATE

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

所以它可能有助於使用 (UPCOMINGDATE.== NULL) 然后渲染。

來自開發人員：值 null 表示有意缺少任何 object 值。 它是 JavaScript 的原始值之一，對於 boolean 操作被視為虛假值。 關聯

簡短的例子

    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>
    )
}