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

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: Cannot read property 'enabled' of undefined。我在这里做错了什么？

Answer 1

由于 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}

Answer 2

试试这个。

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