Реагируйте, показывая 0 вместо ничего с условным компонентом короткого замыкания (&&)

У меня есть следующий простой оператор короткого замыкания, который должен показывать либо компонент, либо ничего:

Если утверждение ложно, оно отображает 0 вместо ничего.

Я сделал console.log(profileTypesLoading) просто чтобы быстро увидеть, каково состояние свойства profileTypesLoading и оно равно 1 или 0, как и ожидалось. 0 должно быть ложным... ничего не отображать. Правильно?

Ответы

Ответ 1

Поскольку ваше условие ложно и поэтому не возвращает второй аргумент (<GeneralLoader />), он вернет profileTypesLoading, который является числом, поэтому реагирует на его рендеринг, поскольку React пропускает рендеринг для всего, что typeof boolean или undefined и отображает все, что является typeof string или number:

Чтобы сделать это безопасным, вы можете использовать троичное выражение {condition ? <Component /> : null} или логическое приведение вашего состояния, например {!!condition && <Component />}

Ответ 2

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

Ответ 3

Это решит проблему:

{!!profileTypesLoading && <GeneralLoader />}

Как он будет конвертировать 0 в ложь. Причина в том, что следующее условие 0 не выполняется и ведет себя как число в JavaScript, поэтому здесь помогает двойное отрицание.