web-dev-qa-db-fra.com

React montrant 0 au lieu de rien avec un composant conditionnel de court-circuit (&&)

J'ai la déclaration de court-circuit simple suivante qui devrait montrer un composant ou rien:

{profileTypesLoading && <GeneralLoader />}

Si l'instruction est fausse, elle rend un 0 Au lieu de rien.

J'ai fait une console.log(profileTypesLoading) juste pour voir rapidement quel est le statut de la propriété profileTypesLoading et c'est soit 1 soit 0 comme prévu. 0 devrait être faux ... ne provoquant aucun rendu. Droite?

Une idée de comment cela a-t-il pu arriver?

reactjscomponentsshort-circuiting
20
Gurnzbot

Puisque votre condition est fausse et ne renvoie donc pas le deuxième argument (<GeneralLoader />), il renverra profileTypesLoading, qui est un nombre, donc react le rendra car React saute le rendu pour tout ce qui est typeofboolean ou undefined et rendra tout ce qui est typeofstring ou number :

Pour le sécuriser, vous pouvez soit utiliser une expression ternaire {condition ? <Component /> : null} ou booléen exprimez votre condition comme {!!condition && <Component />}

36
enapupe

0 est une valeur fausse, donc lorsqu'elle est évaluée par &&, elle renvoie 0. Cependant, 0 est renduable par React car c'est un nombre:

// 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 [~ # ~]

C'est à cause de la façon dont javascript lui-même traite vérité et fausse valeurs :

En JavaScript, une valeur véridique est une valeur considérée comme vraie lorsqu'elle est rencontrée dans un contexte booléen. Toutes les valeurs sont véridiques, sauf si elles sont définies comme fausses (c'est-à-dire, à l'exception de false, 0, "", null, indéfini et NaN).

Lorsqu'elle est utilisée avec l'opérateur &&, la valeur renvoyée dépend de la valeur de gauche:

  • Si la valeur de gauche est véridique, la valeur de droite est renvoyée.
  • Si la valeur de gauche est fausse, sa valeur est renvoyée.

Exemples:

// Truthy values
1 && "hello" // => "hello"
"a string" && "hello" // => "hello"

// Falsy values
0 && "hello" // => 0
false && "hello" // => false
null && "hello" // => null
undefined && "hello" // => undefined

Les mêmes règles s'appliquent à JSX car c'est ne extension de syntaxe pour JavaScript . Cependant, le problème est que **

Le problème est que 0 est une valeur fausse, donc lorsqu'elle est évaluée par &&, elle renvoie 0. Cependant, 0 est rendu par React car c'est un nombre 

// 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
Giovanni Benussi

Cela résoudrait le problème:

{!!profileTypesLoading && <GeneralLoader />}

Comme il convertira 0 en faux. La raison est quand c'est 0 la condition suivante n'est pas exécutée et elle se comporte comme un nombre en JavaScript, donc la double négation aide ici.

1
Sakhi Mansoor