Question

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

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

研究其他OS帖子，但没有提出解决方案

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

我刚刚检查了网络控制台，看到所有标记都指示着它在哪里，如果您可以看到我的github存储库并看到一些奇怪的东西，我将不胜感激GitHub Repository

我的应用程序网络App web

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，您可以确定失败的地方。尽管有时您可能使用缩小的脚本，但并不能保证一定有用，但是它很有用。

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

Answer 3

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

未被捕获（承诺）TypeError：无法读取未定义ERRORr的属性'length'

3 个答案: