1

我正在使用功能组件使用基本 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 语句处停止，并且响铃为未定义（尽管这是预期的）

有什么建议么？

4

3 回答 3

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

总是正确的，因为{}它是一个真实的值。

我想你的意思是：

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

但还是……

> {} === {}
false

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

if(obj === undefined || Object.getOwnPropertyNames(obj).length === 0){
  ...
} else { ...
于 2018-09-12T15:23:23.473 回答
2

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

首先，===运营商是更多的先例||- 请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence。所以你的if陈述被解析为if ((obj === undefined) || {})- 我怀疑这已经与你想要的解释相反。但这不是唯一的事情。

obj === undefined显然会以false(only undefinedis ===to undefined，并且我认为你props.data实际上已经被传入) - 所以正在评估的是空对象 (对 Boolean 的强制) {}。也就是说true，因为所有的对象，即使是空的，在 JS 中都是真实的。

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

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

所以你真正想做的是检查是否obj是一个空对象，不幸的是没有直接的方法可以做到这一点。但这当然已经在之前的 SO 上被问过 - 例如。这里：如何测试一个空的 JavaScript 对象？

于 2018-09-12T15:31:12.050 回答
1

请检查如下

if(typeof obj === 'undefined') {
于 2018-09-12T15:24:29.603 回答