web-dev-qa-db-fra.com

Vérification de non défini dans React

J'ai un scénario dans lequel je passe des données d'un réducteur dans mon état de réaction.

les données:

{
    "id": 1,
    "title": "Test",
    "content": {
        "body": "sdfsdf"
        "image": "http://example.com"
    }
}

Avec composantWillRecieveProps, cela fonctionne parfaitement pour récupérer le titre.

componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps.blog.title,
    })
}

Cependant, j'ai du mal à récupérer les champs imbriqués. Quand je fais ça:

componentWillReceiveProps(nextProps) {
    console.log("new title is", nextProps.blog.title);
    console.log("new body content is", nextProps.blog.content["body"]);
    this.setState({
        title: nextProps.blog.title,
        body: nextProps.blog.content["body"]
    })
}

Je reçois cette erreur:

enter image description here

L'erreur d'un corps non défini disparaît lorsque je clique sur le débogueur et que le contenu est chargé. Y a-t-il un moyen de lutter contre ce problème?

J'ai essayé de vérifier non défini comme ceci:

if (typeof nextProps.blog.content["body"] != 'undefined'){

Mais cela ne fonctionne pas non plus et je pense que c'est parce que le blog n'est pas défini.

reactjscomponentsreduxundefined
27
lost9123193

Ce que vous pouvez faire est de vérifier si vos accessoires sont définis initialement ou non en vérifiant si nextProps.blog.content est indéfini ou non puisque votre corps est imbriqué dedans comme

componentWillReceiveProps(nextProps) {

    if(nextProps.blog.content !== undefined && nextProps.blog.title !== undefined) {
       console.log("new title is", nextProps.blog.title);
       console.log("new body content is", nextProps.blog.content["body"]);
       this.setState({
           title: nextProps.blog.title,
           body: nextProps.blog.content["body"]
       })
    }
}

Vous n'avez pas besoin d'utiliser le type pour rechercher les indéfinis, mais uniquement l'opérateur strict !== qui compare la valeur à leur type et à leur valeur

Afin de vérifier non défini, vous pouvez également utiliser l'opérateur typeof comme

typeof nextProps.blog.content != "undefined"
25
Shubham Khatri

J'étais face au même problème ..... Et j'ai eu la solution en utilisant typeof()

if (typeof(value) !== 'undefined' || value != null) {
         console.log('Not Undefined or Not Null')
  } else {
         console.log('Undefined or Null')
}

Vous devez avoir à utiliser typeof() pour identifier undefined

3
MD Ashik

Si vous devez également vérifier si nextProps.blog N'est pas undefined; vous pouvez le faire en une seule instruction if, comme ceci:

if (typeof nextProps.blog !== undefined && typeof nextProps.blog.content !== undefined) { // }

Et, lorsqu'une valeur undefined, empty ou null n'est pas attendue; vous pouvez le rendre plus concis:

if (nextProps.blog && nextProps.blog.content) { // }

1
Souvik Ghosh