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

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'length' of undefined ERRORr未捕获（承诺中）类型错误：无法读取未定义错误的属性“长度”
【发布时间】：2020-07-13 05:03:20
【问题描述】：

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

这是我的 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 Repository

还有我的应用网站App web

【问题讨论】：

如果在获取数据结果时res.data.articles 未定义，则会发生这种情况
您能否检查控制台以查看来自 API 的数据？
我忘了提到在 localhost 上，它运行良好，这是在生产中并出现错误：C
我会试试 console.log 看看 res.data.articles 显示了什么
我显示了空数组，但我不明白为什么，如果它在我的在线数据库中并且它是创建的

标签： javascript reactjs

【解决方案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)
    })

【讨论】：

我刚刚和邮递员核实过，它不起作用，它显示了一个很长的错误，它可能是什么？是为了生产吗？在 localhost 中，它对我来说非常适合：s
检查您的防火墙，如果您使用的是 linux 服务器，请检查 ufw 的配置，并允许您尝试访问的端口，查看这篇文章，我也遇到了这个问题。 digitalocean.com/community/tutorials/…
试试这个命令 sudo ufw allow from your_ip_or_domain to any port your_port，例如 sudo ufw allow from 203.0.113.4 to any port 8080
Acabo de intentar con localhost y muestra el articulo con postman localhost:3900/api/articles
好的，我去，等我

【解决方案2】：

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

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

但浏览器有助于调试，因此您在上面粘贴的 logs 是 chrome 的 stack trace，您可以确定它失败的地方。虽然有时您可能会使用缩小的脚本，但这并不能保证，但它很有用。

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'
            });
         });
    }

【讨论】：

这向我展示了 {data: " ”，状态：200，状态文本：“”，标题：{…}，配置：{…}，…}

【解决方案3】：

我已经知道是怎么回事了，很尴尬的事情哈哈，我没有走路线，因为我的后端不符合netlify，只有我的前端，所以我继续在heroku中上传我的后端项目，只连接我的路线的全局变量，指向指示 heroku 的链接 :) 并准备好，已解决，谢谢大家的时间。

【讨论】：