Я использую функциональный компонент для печати некоторых данных в React с помощью базового оператора if.
import React from 'react'
export default function Weather (props) {
let obj = props.data
if (obj === undefined || {}) {
console.info(obj) <---returns desired object
return <div>Enter in a city, zipcode, or address</div>
} else {
console.info(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.info(obj)
return <div>Enter in a city, zipcode, or address</div>
}
этот console.info
возвращает все мои данные, хотя он должен работать только в том случае, если объект не определен.
Второй оператор 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 (хотя это ожидается)
Какие-либо предложения?
if (obj === undefined || {}) {
...
} else { ...
всегда верно, потому что {}
- истинное значение.
Я думаю, вы имели в виду:
if (obj === undefined || obj === {}) {
...
} else { ...
но все равно...
> {} === {}
false
Чтобы проверить, пуст ли этот объект:
if (obj === undefined || Object.getOwnPropertyNames(obj).length === 0){
...
} else { ...
Сделайте проверку, как показано ниже
if (typeof obj === 'undefined') {
Это сводится к приоритету операторов в 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
действительно был передан) - так что оценивается (принуждение к Boolean) пустой объект {}
. И это true
, потому что все объекты, даже пустой, в JS правдивы.
Вот почему ваш оператор console.info
всегда выполняется и всегда распечатывает полный объект props.data
.
Вероятно, вы хотели проверить: if ((obj === undefined) || (obj === {}) )
. Проблема в том, что теперь это всегда будет false
(при условии, что вы действительно передаете объект как props.data
), из-за того, как сравнение равенства объектов работает в JS. (Использование ==
здесь тоже не поможет, поскольку он ведет себя идентично ===
, если оба операнда являются объектами.)
Итак, что вы действительно хотите сделать, так это проверить, является ли obj
пустым объектом или нет, и, к сожалению, нет простого способа сделать это. Но об этом, конечно, уже спрашивали ранее на SO - например. здесь: Как проверить пустой объект JavaScript?
это то же самое, что и
obj === undefined
, не так ли? Это все равно не удастся для пустого объекта, который OP не хочет