Question

未捕获（在承诺中）TypeError：无法读取未定义错误的属性“长度”

2020-07-13

1757

javascript reactjs

我在尝试应用条件显示数据库中的文章时遇到了此问题

这是我的 Article.js 组件，错误指示的位置

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;

研究其他操作系统帖子，但没有找到解决方案

需要注意的是，当我打开页面时，它会正常加载，然后所有内容都留空

我刚刚检查了网络控制台，看到所有标记都指向它的位置，如果您能看到我的 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

这些是因代码中发生未处理的错误而发生的一般错误，主要是因为预期和收到的内容不匹配。

在这种情况下，您需要尝试调试代码以确定失败的原因或与预期不同的原因。这被认为是使用 Javascript 的缺点，因为它不是类型证明，而且您会经常遇到此类错误。

但浏览器有助于调试，因此您上面粘贴的 logs 是 chrome 的 stack trace ，您可以确定它失败的位置。虽然这不能保证，因为有时你可能使用了最小化的脚本，但它很有用。

顶部 日志指出错误 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'
            });
         });
    }

Answer 3

我已经知道发生了什么，这很尴尬哈哈，我没有走路线，因为我的后端与 netlify 不一致，只有我的前端，所以我继续在 heroku 中上传我的后端项目并且只连接了我的全局变量用于路线，指向指示 heroku 的链接:)并且准备好了，解决了，谢谢大家的时间。