学习react时碰上的问题,做个记录。
学习资料:http://www.ruanyifeng.com/blog/2015/03/react.html
1)Warning: Each child in an array or iterator should have a unique "key" prop.
其实这只是一个警告,然而,也是红色的不是?原因是对数据做遍历的时候,没有加上key,就是<li key={index}>里面这个key。
2)A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
代码如下:
<span style="white-space:pre"> </span>render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
if(repos.length > 0){
var repoList = repos.map(function (repo, index) {
return (
/*{<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>}*/
<li key={index}>
<p className="sh-chk"><input type="checkbox" value="1" name="item"/></p>
<p className="sh-no"><a href="#">201500122</a></p>
<p className="sh-date">2015-12-31 11:31:46.0</p>
<p className="sh-source">群众反馈</p>
<p className="sh-addr">院前社区东港花园17号楼</p>
<p className="sh-type">矛盾排查</p>
<p className="sh-union">安监部门</p>
<p className="sh-about">洗车房污水流到路面,影响行人走路</p>
<p className="sh-btn"><a href="#">查看</a> <a href="#">编辑</a> <a href="#">删除</a></p>
<div className="clear"></div>
</li>
);
});
}else{
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
//1
}
}
});
似乎是因为如果在else中,必须有return,哪怕你有些了一个ifelse,并且其中都有return也不行。在1的位置插入一个return,错误消失。