1

Bueno estoy en la vista y traigo un array por una ruta de laravel que me retorna un array.

componentDidMount(){
  axios.get('http://localhost:8000/noticias')
    .then(response => {
      this.setState({ destacada: response.data});
      console.log(this.state.destacada[0].titulo);
    })
    .catch(function (error) {
      console.log(error);
    });
}

Esta es la función de la vista. En la que /noticias me devuelve 1 array. Si lo muestro por consola me lo muestra espectacular. La cuestión es cuando quiero mostrarlo en el render no me funciona.

<div className="titulo-noticia">{this.state.destacada[0].titulo}</div>

La consola me dice:

Uncaught TypeError: Cannot read property 'titulo' of undefined

0

2 respuestas 2

1

componentDidMount() se ejecuta después del primer render() del elemento, y setState() lo que hace es ejecutar otro render()

Fíjate en esta gráfica:

React Lifecycle Tomado de: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Y aquí un ejemplo práctico de como y cuando se llama cada método

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Hola'
    };
  }
  
  componentDidMount() {
    console.log('did mount: ', Date.now());
    setTimeout(() => this.setState({name: 'Adios'}), 1000);
  }

  render() {
    console.log('render: ', Date.now());
    return (
      <div>
        <p>
          {this.state.name}
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react"));
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Tu problema

Al tu querer utilizar this.state.destacada[0].titulo el método render ya se ejecutó pero en el state la variable todavía no existe. De hecho si no se ha declarado en el constructor, this.state no existe

Posibles soluciones

Podrías o bien asignar un valor por defecto en el constructor en el componente, o validar que la variable exista, por ejemplo:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    setTimeout(() => this.setState({greeting: [{message: 'Hola :D'}]}), 1000);
  }

  render() {
    return (
      <div>
        <p>Esperalo...</p>
        <p>
          {this.state.greeting ? this.state.greeting[0].message : ''}
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react"));
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

-1

te recomiendo primero sacar esa función del componentDidMount() porque eso se ejecuta después del render, segundo cada vez que haces cambio a un state que el render esté utilizando, el render se vuelve a ejecutar automáticamente, pero parece ser que this.state no está definido. Te doy dos soluciones:

  • Solución 1

Usar NEXT.JS que es una librería muy buena para lo que necesitas además de que básicamente puedes olvidarte del webpack, gracias a next tienes un nuevo método llamado getInitialProps lo que te permite básicamente, crear un props de esta manera

static async getInitialProps(){    
  let res = await fetch('http://localhost:8000/noticias')
  let data = await res.json();
  return {data}
} 

Gracias a esto tendrás lo que necesitas directamente en los props así:

render(){
  return(
   <div className="titulo-noticia">{this.props.data.destacada[0].titulo}</div>
  )}
  • Solución 2

Puedes crear una función y ejecutarla en el componentWillMount así:

getData=()=>{
   fetch ('http://localhost:8000/noticias')
   .then(res=>{      
     return res.json() 
   })  
   .then(data=>{
     this.setState({data:data})
   })
}
componentWillMount(){
   this.getData()
}

Pero eso sí, debes definir los states que uses, para hacerlo tienes que hacer esto

constructor() {
 super();
 this.state = {};
 //En "this.state" debes definir todo lo que vayas a usar, por ejemplo la varaiable 
 //"destacada" debeía ir como this.state= {destacada: []}
}

Y por último, es probable que esto ya lo sepas pero a lo mejor no, para hacer render de todos los elementos de un array simplemente debes hacer una función "map" así;

render(){
  return(
    {
       this.state.detacada.map((element)=>{
         <div className="titulo-noticia">{element}</div>
       })
    }
  )
}
1
  • componentWillMount está deprecada y no se debe utilizar ya que se removerá en la versión 17 de React
    – user22721
    el 14 feb. 2019 a las 16:00

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.