如果JSX反应中没有ELSE条件

问题描述

我试图以一种愚蠢的方式在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” 。我在这里做什么错了？

解决方法

由于selectedWebsite是一个empty object，因此您可以检查密钥长度，而不必检查空对象是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}

,

尝试一下。

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