我有以下组成部分:
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
continue
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> ); }