Estoy intentando construir un componente que recibe parámetros. Este componente es llamado cuando, se pulsa una noticia en una página principal. El único parámetro que le paso manualmente es la propiedad slug.
El componente lo tengo definido de esta forma:
Tal cual está el código no me lanza ningún error, pero necesito recorrer el array articles para poder escribirlo en html. He probado con dos opciones y no me ha funcionado ninguna.
Opción 1:
Opción 2:
Acceder directamente a los datos del array:
En ambos casos me lanza el siguiente error:
Me lanza el error:
TypeError: this.state.articles is undefined
Este error entiendo que es porque la primera vez que renderiza el componente, articles está vacío, de ahí que si hago un console.log(this.state.articles) me devuelve undefined. No es hasta que accede a componentDidMount() y le asigna un valor al array articles.
He intentado probar con un condicional para que a la hora de renderizar compruebe si articles está vacío o no:
Pero me sigue dando el mismo problema.
El componente lo tengo definido de esta forma:
HTML:
import React, { Component } from 'react';
import axios from 'axios';
class Articulo extends Component {
constructor(props) {
super(props);
this.state = {
url : 'http://aldeasinfantiles-wp.lin3sdev.com/wp-json/wp/v2/posts?slug=' + this.props.match.params.slug
}
}
state = {
articles: [],
};
componentDidMount() {
axios.get(this.state.url).then(res => {
this.setState({ articles: res.data});
});
};
render() {
console.log(this.state.articles)
return (<div className='articles-wrapper'></div>)
}
}
export default Articulo;Tal cual está el código no me lanza ningún error, pero necesito recorrer el array articles para poder escribirlo en html. He probado con dos opciones y no me ha funcionado ninguna.
Opción 1:
HTML:
render() {
return (<div className='articles-wrapper'>
{this.state.articles.map( articulo => <h1>{articulo.title.rendered}</h1>)
</div>)
}Acceder directamente a los datos del array:
HTML:
render() {
return (<div className='articles-wrapper'><h1>{articulo.title.rendered</div>)
}Me lanza el error:
TypeError: this.state.articles is undefined
Este error entiendo que es porque la primera vez que renderiza el componente, articles está vacío, de ahí que si hago un console.log(this.state.articles) me devuelve undefined. No es hasta que accede a componentDidMount() y le asigna un valor al array articles.
He intentado probar con un condicional para que a la hora de renderizar compruebe si articles está vacío o no:
HTML:
render() {
if (this.state.articles.length > 0) {
return (<div>El array está vacío</div>)
} else {
return (<div className='articles-wrapper'><h1>{this.state.articles[0].title.rendered}</h1></div>)
}
}Pero me sigue dando el mismo problema.
