Ajax请求的数据绑定给组件

用了一天的时间搞这个，踩坑不少

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，以上适用于小型项目哦，哈哈