React - vérifier les props

Question

J'ai une question simple et rapide. Il y a beaucoup de situations où nous devons vérifier si les props sont indéfinis.

Qu'en est-il des props imbriqués, par exemple nous avons :

this.props.data.income.data1.value.chartData

et nous voulons vérifier si chartData existe

il doit y avoir un meilleur moyen, plus clair, que de

if(
this.props.data && 
this.props.data.income && 
this.props.data.income.data1 &&     
this.props.data.income.data1.value && 
this.props.data.income.data1.value.chartData!==null
)

Je ne peux pas simplement vérifier que this.props.data.income.data1.value.chartData!==null

Dites-moi comment vous résolvez ce problème dans vos projets ?

Answer 1

Je suis un fan de l'utilisation lodash's _.get() .

Vous pouvez chercher aussi profondément que vous le souhaitez dans les objets et s'il n'y a rien, il n'y aura pas d'erreur. Pour reprendre votre exemple :

_.get(this.props.data, 'income.data1.value.chartData')

renverrait soit le chartData, soit undefined s'il n'y avait pas income , data1 , value o chartData

Answer 2

Jetez un coup d'œil à chaînage facultatif - vous devrez actuellement utiliser un plugin babel pour l'utiliser, mais la proposition est de rendre cette approche disponible en JS natif. Elle vous permet de référencer les propriétés d'un objet de la manière suivante :

this.props.data?.income?.data1?.value?.chartData?

si l'une des propriétés se terminant par ? peut ne pas exister.

Answer 3

Il peut y avoir plusieurs approches à ce problème.

1. Vous pouvez faire en sorte que vos composants dépendent des valeurs de prop. Par exemple, si un objet est rendu, cela signifie que les vérifications approfondies des objets de données ne sont pas nécessaires puisqu'elles sont déjà présentes.
2. Vous pouvez définir de nouveaux props à chaque composant qui sont juste une ventilation de toutes les valeurs de prop. Je ne le recommande pas, car cela signifie que vous devrez gérer la validation de plusieurs objets props.
3. Et enfin, décomposez probablement votre structure de données en quelque chose de plus simple.

Answer 4

Vous pouvez utiliser l'underscore js. Vous pouvez utiliser ceci comme référence http://underscorejs.org/#has

_.has(object, key)
Does the object contain the given key? Identical to object.hasOwnProperty(key), but uses a safe reference to the hasOwnProperty

_.has({a: 1, b: 2, c: 3}, "b");
=> true

de la même manière, vous pouvez utiliser comme ceci

_.has(this.props, "data")
it will return either true or false.

Answer 5

C'est ce que je fais dans de tels cas :

((((this.props.data || {}).income || {}).data1 || {}).value || {}).chartData !== null

Cela revient à décomposer chaque propriété de l'objet une par une. En faisant [property] || {} vous vérifiez si property existe, sinon créez un objet vide afin que la prochaine vérification ne vous envoie pas d'erreur.

Si vous vous demandez pourquoi cela fonctionne, prenez cet exemple :

const a = {b: "foo bar"};

a.b // "foo bar"
a.c // undefined
a.c.d // ERROR!

Ici, c n'est pas une clé valide pour l'objet a donc vous obtenez undefined ce qui est toujours acceptable. Cependant, vous ne pouvez pas demander la clé d pour l'objet non existant c . C'est là que vous obtenez une erreur.

Pour y remédier, vous pouvez créer un nouvel objet {} et travailler là-dessus. C'est un objet vide, il retournera donc toujours undefined mais en faisant cela un niveau à la fois, vous n'obtiendrez jamais d'erreur.

Ce n'est pas une solution visuellement très jolie, mais elle vous permet d'économiser quelques lignes.