Uncaught (in promise) TypeError: Cannot read property 'length' of undefined ERRORr

Question

I am experiencing this problem when trying to apply a condition to display articles from my database

This is my Article.js component which is where the error indicates

import React, { Component } from 'react';
import axios from 'axios';
 class Articles extends Component {

   state = {
    articles: [],
    status: null
    }
   componentWillMount() {
     this.getArticles();
    }

    getArticles = () => {
    axios.get("https://arthuro-gomez-react.netlify.app/api/articles")
        .then(res => {
            this.setState({
                articles: res.data.articles,
                status: 'success'
            });
         });
    }

    render() {
    if (this.state.articles.length >= 1) {

        var listArticles = this.state.articles.map((article) => {
            return (
                <article className="article-item" id="article-template">
                    <div className="image-wrap">
                        <img 
   src="https://unhabitatmejor.leroymerlin.es/sites/default/files/styles/header_category/public/2018- 
   10/4%20paisaje%20macedonia.jpg?itok=AELknmF8" alt="Paisaje" />
                    </div>

            <h2>{article.title}</h2>
                    <span className="date">
                        {article.date}
                </span>
                    <a href="#">Leer más</a>

                    <div className="clearfix"></div>
                </article>
            );
        });
        return (
            <div id="articles">
                {listArticles}
            </div>
        );
    } else if (this.state.articles.length === 0 && this.state.status === 'success') {
        return (
            <div id="articles">
                <h2 className="subheader">No hay articulos para mostrar</h2>
                <p>Todavia no hay contenido en esta sección</p>
            </div>
        );
    } else {
        return (
            <div id="articles">
                <h2 className="subheader">Cargando</h2>
                <img 
 src="https://pa1.narvii.com/6707/510b0daee67fbc091f14b9d8ef40aeb6c0d4dc7d_hq.gif"/>
            </div>
        );
    }
}
}

 export default Articles;

Research other OS posts but don't come up with a solution

It should be noted that when I open the page, it does as normal load and then leaves everything blank

I just checked the network console to see and everything marks be directing where it is, if you could see my github repository and see something weird I would appreciate it GitHub Repository

And my app web App web

Answer 1

I already knew what was happening, something very embarrassing haha, I did not take the routes, because my backend was not in line with netlify, only my frontend, so I proceeded to upload my backend project in heroku and only connected my Global variable for the routes, pointing to the link that indicated heroku :) and ready, solved, thank you all for your time.

Answer 2

Your API is not working, check this picture from insomia Check your api. By this your length is empty.

Or try this way

Axios.get('http://localhost:yourport/api/someroute')
    .then(res =>{
        const data = res.data;//to save your data response
        console.log("----SETTING DATA-----")
        console.log(data)//to see your data response
        this.setState({articles}) //to set your data response

        console.log("++++++ALL DATA WAS SETTING++++++")
    }).catch(err=>{
        console.log(err)
    })

Answer 3

These are generic errors that occur due to the unhandled error that occurred in your code, it mostly because of mismatching between what expected and what received.

In such cases, you need to try debugging your code to identify what gets failed or different from what expected. This is something considered as drawback of using Javascript as it's not type proof and you encounter such errors a lot.

But browsers help in debugging, so logs you pasted above is the stack trace of chrome and you can identify where it's failing. It's not guaranteed though as sometimes you probably worked with minified scripts but it's useful a lot.

Top log which states error article.js click on that it will point you the line of the page where you getting this error, add logs there and you will get an answer.

As just by seeing you probably trying to get length of something which is not available.

Try add a log for res and see what you received

axios.get("https://arthuro-gomez-react.netlify.app/api/articles")
        .then(res => {
            console.log(res)
            this.setState({
                articles: res.data.articles,
                status: 'success'
            });
         });
    }