用了一天的时间搞这个，踩坑不少
class PrizeItems extends Component{
constructor(props){
super(props);
this.state = {
posts: []
};
};
componentWillMount(){
var _this = this;
var p1 = new Promise(function (res, rej) {
$.ajax({
url:"src/data/award.json",
type:"GET",
dataType:"json",
success:function (data) {
res(data);
},
error:function (data) {
rej("请求失败");
}
})
});
p1.then(function (data) {
console.log(data);
const posts = data.awards.map((obj) => obj);
_this.setState({ posts });
});
}
render(){
console.log(this.state.posts);
return(
<ul>
{this.state.posts.map((post) =>
<PrizeItem key={post.rank.toString()} productName = {post.productInfo.productName} picUrl={post.productInfo.picUrl}>
</PrizeItem>
)}
</ul>
)
}
}
1.state这个对象内部可以是任意的数据类型
2.ajax请求是异步进行的，所以数据要在 componentWillMount或 componentDidMount生命周期内完成。
3.componentWillMount 内的this与ajax内的this不是一样的，需要进行绑定
var _this = this;
_this.setState({ posts });
项目比较大时，我们可以用redux，以上适用于小型项目哦，哈哈
萌萌哒
