У меня есть следующий простой оператор короткого замыкания, который должен показывать либо компонент, либо ничего:
{profileTypesLoading && <GeneralLoader />}
Если утверждение ложно, оно отображает 0 вместо ничего.
Я сделал console.log(profileTypesLoading) просто чтобы быстро увидеть, каково состояние свойства profileTypesLoading и оно равно 1 или 0, как и ожидалось. 0 должно быть ложным... ничего не отображать. Правильно?
Есть идеи, почему это произойдет?
Поскольку ваше условие ложно и поэтому не возвращает второй аргумент (<GeneralLoader />), он вернет profileTypesLoading, который является числом, поэтому реагирует на его рендеринг, поскольку React пропускает рендеринг для всего, что typeof boolean или undefined и отображает все, что является typeof string или number:
Чтобы сделать это безопасным, вы можете использовать троичное выражение {condition ? <Component /> : null} или логическое приведение вашего состояния, например {!!condition && <Component />}
0 - ложное значение, поэтому, когда оно оценивается && amp;, оно возвращает 0. Однако 0 может быть воспроизведено React, потому что это число:
// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'
// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing
TLDR
Это из-за того, как сам javascript обрабатывает истинные и ложные значения:
В JavaScript истинное значение - это значение, которое считается истинным, когда встречается в логическом контексте. Все ценности правдивы, если они определяются как ложные (то есть, кроме ложных, 0, "", ноль, неопределенный, и NaN).
При использовании с && оператор, возвращаемое значение зависит от левого значения:
Примеры:
// Truthy values
1 && "hello" // => "hello"
"a string" && "hello" // => "hello"
// Falsy values
0 && "hello" // => 0
false && "hello" // => false
null && "hello" // => null
undefined && "hello" // => undefined
Те же правила применяются к JSX, потому что это расширение синтаксиса для JavaScript. Однако проблема в том, что **
Проблема в том, что 0 - ложное значение, поэтому, когда оно оценивается && amp;, оно возвращает 0. Однако 0 может быть воспроизведено React, потому что это число
// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'
// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing
Это решит проблему:
{!!profileTypesLoading && <GeneralLoader />}
Как он будет конвертировать 0 в ложь. Причина в том, что следующее условие 0 не выполняется и ведет себя как число в JavaScript, поэтому здесь помогает двойное отрицание.