Javascript 未捕获（承诺中）类型错误：无法读取属性'；长度'；未定义错误的定义
我在尝试应用条件以显示数据库中的文章时遇到此问题 这是my Article.js组件，错误显示在这里Javascript 未捕获（承诺中）类型错误：无法读取属性'；长度'；未定义错误的定义,javascript,reactjs,Javascript,Reactjs,我在尝试应用条件以显示数据库中的文章时遇到此问题 这是my Article.js组件，错误显示在这里 import React, { Component } from 'react'; import axios from 'axios'; class Articles extends Component { state = { articles: [], status: null } componentWillMount() { this.ge
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;
import React，{Component}来自'React'；
从“axios”导入axios；
类文章扩展了组件{
状态={
第[…]条，
状态：空
}
组件willmount（）{
这个.getArticles（）；
}
getArticles=（）=>{
axios.get（“https://arthuro-gomez-react.netlify.app/api/articles")
。然后（res=>{
这是我的国家({
文章：res.data.articles，
状态：“成功”
});
});
}
render（）{
如果（this.state.articles.length>=1）{
var listArticles=this.state.articles.map（（article）=>{
返回(
);
});
返回(
{listArticles}
);
}else if（this.state.articles.length==0&&this.state.status==success）{
返回(
无关节畸形
托达维娅·海伊·恩斯塔·塞西翁（Todavia NoHay Contendo en esta sección）
);
}否则{
返回(
卡甘多
);
}
}
}
出口违约物品；
和my app web这些是由于代码中发生的未经处理的错误而发生的一般性错误，主要是由于预期和接收之间的不匹配 在这种情况下，您需要尝试调试代码，以确定哪些失败或与预期不同。这被认为是使用Javascript的一个缺点，因为它不是类型证明，而且您经常会遇到这样的错误 但是浏览器有助于调试，因此您在上面粘贴的
日志堆栈跟踪Toparticle.jsresaxios.get("https://arthuro-gomez-react.netlify.app/api/articles")
.then(res => {
console.log(res)
this.setState({
articles: res.data.articles,
status: 'success'
});
});
}
您的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)
})
我已经知道发生了什么，非常尴尬的事情哈哈，我没有选择路线，因为我的后端与netlify不一致，只有我的前端，所以我继续在heroku上传我的后端项目，只连接路线的全局变量，指向指向指向heroku:）的链接，准备好了，解决了，谢谢大家的时间。如果当您得到数据结果时，
res.data.articles