0

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:

import React, { Component } from 'react';
import axios from 'axios';


class Articulo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      url : 'URL' + 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:

render() {
      return (<div className='articles-wrapper'>
         {this.state.articles.map( articulo => <h1>{articulo.title.rendered}</h1>)
        </div>)
  }

Opción 2:

Acceder directamente a los datos del array:

  render() {
        return (<div className='articles-wrapper'><h1>{articulo.title.rendered</div>)
    }

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:

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.

2 respuestas 2

2

El error es:

   state = {
     articles: [],
   };

Necesitas declarar articles dentro del constructor junto a ‘url’ y no fuera de el:

  constructor(props) {
    super(props);
    this.state = {
       url : 'URL' + this.props.match.params.slug,
       articles: []
     };
   }
1
  • No por que declares el objeto "state" sera parte del estado, esnecesario hacerlo en el constructor y solo debe haber una propiedad con ese nomber. Commented el 19 jul. 2018 a las 17:33
1

Finalmente lo he resuelto modificando la forma en la que recorría el array:

this.state.articles.map(articulo => {
     return (
        <article className='article-wrapper' key={articulo.id}>
           //contenido
        </article>  
     )
  })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.