web-dev-qa-db-fra.com

La meilleure façon de gérer les valeurs nulles dans ReactJS?

J'accède à une API avec ReactJS. Quelle est la meilleure façon d'arrêter React Composant se bloque quand il accède à une propriété dans l'objet fourni par l'API qui peut être "non définie"?

Un exemple d'erreur est:

TypeError: impossible de lire la propriété 'items' d'undefined

javascriptreactjsjavascript-objects
6
Nathan Horrigan

Il semble que vous tentiez d'accéder à la propriété items d'une variable x.

Et si x est undefined, alors appeler x.items vous donnera l'erreur que vous avez mentionnée.

Faire un simple:

if (x) {
  // CODE here
}

ou

if (x && x.items) { // ensures both x and x.items are not undefined
  // CODE here
}

ÉDITER:

Vous pouvez maintenant utiliser chaînage facultatif , ce qui est très agréable:

if (x?.items)
9
Kenny Meyer

Cet article parle de quelques stratégies de gestion des erreurs dans votre application React.

Mais dans votre cas, je pense que l'utilisation de la clause try-catch serait la plus pratique.

let results;
const resultsFallback = { items: [] };
try {
  // assign results to res
  // res would be an object that you get from API call
  results = res.items;
  // do stuff with items here
  res.items.map(e => {
    // do some stuff with elements in items property
  })
} catch(e) {
  // something wrong when getting results, set
  // results to a fallback object.
  results = resultsFallback;
}

Je suppose que vous l'utilisez uniquement pour un composant de réaction embêtant particulier. Si vous souhaitez gérer un type d'erreur similaire, je vous suggère d'utiliser ReactTryCatchBatchingStrategy dans le billet de blog ci-dessus.

2
Mμ.
  • Dans une fonction simple, vous le faites simplement par l'instruction if.
if(typeof x !=='undefined' && typeof x.item !=='undefined'){

}
  • dans JSX, vous le faites de cette façon.
render(){
return(
          <div>
          (typeof x !=='undefined' && typeof x.item !=='undefined')?
                <div>success</div>:           
                <div>fail</div>
          </div>
          )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
2
Rajat Gupta

La meilleure façon de vérifier un tel problème est d'exécuter votre code de test dans la console de Google. Comme pour une vérification nulle, on peut simplement vérifier if(!x) ou if(x==undefined)

0
keshav goswami