reactjs - conditionally - render component react

Comprobación de Indefinido en Reaccionar

Question

Tengo un escenario en el que estoy pasando datos de un reductor a mi estado de reacción.

datos:

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

Usando componentWillRecieveProps, esto funciona perfectamente para recuperar el título.

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

Sin embargo, tengo dificultades para recuperar los campos anidados. Cuando hago esto:

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"]
    })
}

Me sale este error:

El error de un cuerpo indefinido desaparece después de hacer clic en el depurador y se carga el contenido. ¿Hay alguna forma de combatir este problema?

Traté de verificar indefinido como este:

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

Pero esto tampoco funciona y creo que es porque el blog no está definido.

Answer 1

Lo que puede hacer es verificar si su puntaje está definido inicialmente o no al verificar si nextProps.blog.content está indefinido o no, ya que su cuerpo está anidado dentro de él como

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"]
       })
    }
}

¡No necesita usar el tipo para verificar si está indefinido, solo el operador estricto !== que compara el valor por su tipo y valor

Para comprobar si no está definido, también puede usar el operador typeof como

typeof nextProps.blog.content != "undefined"