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"