Question

我正在使用功能组件使用基本的if语句在React中打印出一些数据

import React from 'react'

export default function Weather (props) {
   let obj = props.data
   if(obj === undefined || {}) {
    console.log(obj) <---returns desired object
    return <div>Enter in a city, zipcode, or address</div>
   } else {
       console.log(obj) <-- returns undefined
        return<div>
               <p>{obj.minutely.summary}</p>
               <p>{obj.currently.temperature}</p>
               <p>{obj.currently.humidity}</p>
               <p>{obj.currently.windSpeed}</p>
               <p>{obj.currently.uvIndex}</p>
               <p>{obj.currently.precipProbability}</p>
               </div>

              }
           }

if语句的逻辑是这样的：如果数据为undefined，则打印出输入地址的指示，否则打印出数据。

令人困惑的是，发生的是if语句似乎忽略了条件，因为

if(obj === undefined || {}) {
    console.log(obj)
    return <div>Enter in a city, zipcode, or address</div>
}

此console.log返回我的所有数据，即使该数据仅在对象未定义的情况下才可以运行。

第二个if语句甚至不会打印出来。我尝试过切换两者，所以看起来像这样：

if(obj !== undefined || {}) {
   return<div>
        <p>{obj.minutely.summary}</p>
        <p>{obj.currently.temperature}</p>
        <p>{obj.currently.humidity}</p>
        <p>{obj.currently.windSpeed}</p>
        <p>{obj.currently.uvIndex}</p>
        <p>{obj.currently.precipProbability}</p>
        </div>
 } else {
   return <div>Enter in a city, zipcode, or address</div>

 }

但是，由于它正在尝试查找尚未设置的对象，因此它仍然在第一个if语句上停止并以undefined响起（尽管这是预期的）

有什么建议吗？

Answer 1

if(obj === undefined || {}) {
  ...
} else { ...

始终为真，因为{}是真实值。

我想你的意思是

if(obj === undefined || obj === {}) {
  ...
} else { ...

但仍然...

> {} === {}
false

为了检查该对象是否为空：

if(obj === undefined || Object.getOwnPropertyNames(obj).length === 0){
  ...
} else { ...

Answer 2

这取决于JS中的运算符优先级，以及“或”运算符||的实际工作方式。

首先，===运算符比||更有先例-参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence。因此，您的if语句被解析为if ((obj === undefined) || {})-我怀疑这已经与您希望它的解释方式相反。但这不是唯一的事情。

obj === undefined显然会以false的形式出现（只有undefined是===到undefined，我想您的props.data有实际上已传入）-因此要评估的是空对象{}（对布尔的强制转换）。就是true，因为在JS中，所有对象，甚至是空对象，都是真实的。

这就是为什么您的console.log语句总是被执行，并且总是打印出完整的props.data对象的原因。

您可能要检查的内容是：if ((obj === undefined) || (obj === {}) )。问题在于，由于JS中对象相等比较的工作原理，它现在将始终为false（假设您确实将对象作为props.data传递）。（在两个操作数都是对象的情况下，使用==也无济于事，因为它的行为与===相同）。

因此，您真正想做的是检查obj是否为空对象，不幸的是，没有简单的方法可以做到这一点。但这当然已经在SO上被问过-例如。此处：How do I test for an empty JavaScript object?

Answer 3

像下面一样检查

if(typeof obj === 'undefined') {

在React和JSX中反转if语句

3 个答案: