Uncaught (в обещании) TypeError: невозможно прочитать свойство 'length' неопределенной ERRORr

Question

У меня возникла эта проблема при попытке применить условие для отображения статей из моей базы данных

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 (
                

Paisaje

{article.title}

{article.date} Leer más

); }); возвращение ( {listArticles} ); } else if (this.state.articles.length === 0 && this.state.status === 'success') {return ( No hay articulos para mostrar

Todavia no hay contenido en esta sección

); } else {return ( Каргандо ); }}} экспорт статей по умолчанию;

Изучите другие сообщения об ОС, но не придумайте решения

Следует отметить, что когда я открываю страницу, она загружается как обычно, а затем все остается пустым

Я только что проверил сетевую консоль, чтобы увидеть, и все отметки указывают на то, где это находится, если бы вы могли увидеть мой репозиторий github и увидеть что-то странное, я был бы признателен Репозиторий GitHub

И мое веб-приложение Веб-приложение

Answer 1

Ваш API не работает, проверьте эту картинку из insomia инсомия Проверьте свой api. По этому ваша длина пуста.

Или попробуйте так

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 2

Я уже знал, что происходит, что-то очень смущающее, ха-ха, я не выбрал маршруты, потому что мой бэкэнд не соответствовал netlify, только мой интерфейс, поэтому я начал загружать свой бэкэнд-проект в heroku и подключил только свой Глобальная переменная для маршрутов, указывающая на ссылку, которая указывает героку :) и готово, решено, всем спасибо за ваше время.

Answer 3

Это общие c ошибки, которые возникают из-за необработанной ошибки, возникшей в вашем коде, в основном из-за несоответствия между ожидаемым и полученным.

В таких случаях вам нужно попробовать отладку ваш код, чтобы определить, что выходит из строя или отличается от ожидаемого. Это считается недостатком использования Javascript, так как это не проверка типа, и вы часто сталкиваетесь с такими ошибками.

Но браузеры помогают в отладке, поэтому logs, которое вы вставили выше, - это stack trace из chrome, и вы можете определить, где он не работает. Это не гарантируется, хотя иногда вы, вероятно, работали с минифицированными скриптами, но это очень полезно.

Top журнал, в котором указана ошибка article.js щелкните по нему, он укажет вам строку страницы, на которой вы получаете это ошибка, добавьте туда журналы, и вы получите ответ.

Как только вы видите, что вы, вероятно, пытаетесь получить length чего-то недоступного.

Попробуйте добавить журнал для res и посмотрите, что получили

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