在React和JSX中反轉if語句

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/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence 。 因此， if將if語句解析為if ((obj === undefined) || {}) -我懷疑這已經與您希望它的解釋方式相反。 但這不是唯一的事情。

obj === undefined顯然會變成false （只有undefined是===到undefined ，而且我認為您的props.data實際上已經傳入了）-因此，正在評估的是（強制轉換為Boolean）空對象{} 。 這是true ，因為在JS中，所有對象（甚至是空對象）都是真實的。

因此，這就是您的console.log語句始終執行並始終打印出完整的props.data對象的原因。

您可能要檢查的內容是： if ((obj === undefined) || (obj === {}) ) 。 問題在於，由於在JS中對象相等比較的工作原理，現在這將始終是false （假設您確實確實將對象作為props.data ）。 （在此處使用==也無濟於事，因為如果兩個操作數都是對象，它的行為與===相同）。

因此，您真正想要做的就是檢查obj是否為空對象，不幸的是，沒有簡單的方法可以做到這一點。 但這當然已經在SO上被問過-例如。 此處： 如何測試空的JavaScript對象？

Answer 3

做如下檢查

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