IF-ELSE条件在JSX REACT中不起作用

Question

我正试图以万无一失的方式在JSX中执行一个if条件

{
((selectedWebsite != null) && (selectedWebsite.desktop_prompt != null) &&
(typeof selectedWebsite.desktop_prompt !== "undefined")) ?
<FormControlLabel style={{"margin-left": "auto"}}
control={<Switch size="small"
checked={selectedWebsite.desktop_prompt.enabled}
onChange={handleCheckDesktop}/>}
/> :
null
}

现在selectedWebsite是｛｝，desktop_prompt是未定义的，但仍在执行if条件，并且我得到错误TypeError:无法读取未定义的属性'enabled'。我在这里做错了什么？

Answer 1

由于selectedWebsite是一个空对象，您可以检查密钥长度，而不是检查空对象是undefined或null:

{Object.keys(selectedWebsite).length !== 0 ? 
<FormControlLabel
style={{"margin-left": "auto"}}
control={<Switch size="small"
checked={selectedWebsite.desktop_prompt && selectedWebsite.desktop_prompt.enabled}
onChange={handleCheckDesktop}
/>}
/> : null}

Answer 2

试试这个。

{
selectedWebsite && selectedWebsite.desktop_prompt ?
<FormControlLabel style={{"margin-left": "auto"}}
control={<Switch size="small"
checked={selectedWebsite.desktop_prompt.enabled}
onChange={handleCheckDesktop}/>}
/> :
null
}