我有以下组件:
文章列表.jsx
import React from 'react';
import './articles_list.css';
export default class ArticlesList extends React.Component {
constructor(props) {
super(props);
this.state = {
articles: null
}
}
componentWillMount() {
fetch('/articles_all')
.then(res => res.json())
.then(json => {
this.setState({
articles: json.articles
});
});
}
render() {
var teste = () => {
if (this.state.articles === null) {
return(<div>No articles</div>)
} else {
{this.state.articles.forEach( function(element, index) {
console.log(element);
return <div key={index}>{element.title}</div>;
})}
}
}
return(
<div className="articles_list">
<div className="articles_list_title">
ARTICLES
</div>
<div>{teste()}</div>
</div>
);
}
}
虽然 JSON 请求工作正常并返回一个包含五个 JSON 对象的数组,但它们就是不呈现!
我是 ReactJS 的新手,阅读(并观看)了很多教程,但似乎我遗漏了一些东西。
有什么建议吗?
最佳答案
forEach 中的 return 语句不返回值,而是像 continue
语句一样,您需要使用 map
var teste = () => {
if (this.state.articles === null) {
return(<div>No articles</div>)
} else {
{this.state.articles.map( function(element, index) {
console.log(element);
return <div key={index}>{element.title}</div>;
})}
}
}
否则,如果你想使用 forEach,你需要像这样修改你的代码
render() {
var teste = []
if (this.state.articles === null) {
teste.push(<div>No articles</div>)
} else {
{this.state.articles.forEach( function(element, index) {
console.log(element);
teste.push( <div key={index}>{element.title}</div>);
})}
}
}
return(
<div className="articles_list">
<div className="articles_list_title">
ARTICLES
</div>
<div>{teste}</div>
</div>
);
}
关于javascript - 基于对象列表渲染 ReactJS 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44381380/