大佬教程收集整理的这篇文章主要介绍了如果对象不为空，如何有条件地渲染对象以显示一段代码，如果对象具有 key: value 则如何有条件地呈现一段代码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果对象 UPCOMING 有数据，我将尝试渲染一段代码，如果对象没有数据，则渲染不同的代码段。我遇到的问题是当对象为空时，代码中稍后使用的键/值对会引发错误。
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',{
month: 'AUG',title: 'falL 2019 SHOWCASE',title: 'WINTER 2019 SHOWCASE',]
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={Classe@R_450_11163@pcomingShowMobilE}>UPCOMING SHOW</p>
</div>
<div>
<p classname={Classes.noUpcomingShowsMobilE}>
NO UPCOMING SHOWs...FOR Now.
</p>
</div>
</div>
) : (
<div>
<div classname={Classes.flyerImageMobilE}>
<div classname={Classe@R_450_11163@pcomingShowParentMobilE}>
<img
src={PlaceholderUpcomingShowImageMobilE}
classname={Classes.imageStyleMobilE}
/>
</div>
</div>
</div>
)}
</div>
{UPCOMINGEVENT ? (
<div>
<div classname={Classe@R_450_11163@pcomingShowsMobilE}>
<div classname={Classes.titleContainerMobilE}>
<p classname={Classe@R_450_11163@pcomingShowtitleMobilE}>
{/* {UPCOMINGEVENT.titlE} */}
{titlE}
</p>
{/* <p classname={Classe@R_450_11163@pcomingShowtitleMobilE}>
WINTER 2020 SHOWCASE
</p> */}
</div>
<div classname={Classes.dateLOCATIOnContainerMobilE}>
<p classname={Classe@R_450_11163@pcomingShowDateLOCATIOnMobilE}>
{/* {UPCOMINGEVENT.datE} | {UPCOMINGEVENT.LOCATIOn} */}
{datE} | {LOCATIOn}
</p>
{/* <p classname={Classe@R_450_11163@pcomingShowDateLOCATIOnMobilE}>
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={Classe@R_450_11163@pcomingShowbuttonContainerMobilE}>
<button classname={Classe@R_450_11163@pcomingShowbuttonMobilE}>
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>
我不确定我做错了什么。对此的任何帮助将不胜感激。
当对象为空时，它得到的值是 undefined 还是 null？还是它的值长度为 0？我想你也许应该使用“Object.keys(obj).length === 0”作为条件。
,您可能必须使用 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 表示有意缺少任何对象值。它是 JavaScript 的原始值之一，对于布尔运算被视为假。 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>
)
}
以上是大佬教程为你收集整理的如果对象不为空，如何有条件地渲染对象以显示一段代码，如果对象具有 key: value 则如何有条件地呈现一段代码全部内容，希望文章能够帮你解决如果对象不为空，如何有条件地渲染对象以显示一段代码，如果对象具有 key: value 则如何有条件地呈现一段代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。