Обратный оператор if в React и JSX

Question

Я использую функциональный компонент для распечатки некоторых данных в React с использованием базового оператора if

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

this 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 и звонит как неопределенный (хотя это и ожидается)

Есть предложения?

Answer 1

Проверьте, как показано ниже

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

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 === {}) ). Проблема в том, что теперь это всегда будет false (при условии, что вы действительно передаете объект как props.data) из-за того, как в JS работает сравнение на равенство объектов. (Использование == здесь также не поможет, поскольку оно ведет себя идентично ===, если оба операнда являются объектами.)

Итак, что вы действительно хотите сделать, это проверить, является ли obj пустым объектом или нет, и, к сожалению, нет простого способа сделать это. Но об этом, конечно, уже спрашивали на SO, например. здесь: Как мне проверить пустой объект JavaScript?

Answer 3

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

всегда верно, потому что {} является истинным значением.

Я думаю, вы имели в виду:

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

но все же ...

> {} === {}
false

Чтобы проверить, является ли этот объект пустым:

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