初遇react，問題不斷，react生命週期變化，會隨著setState狀態改變，昨天遇到個問題，處理到晚上10點，雖然自己琢磨未果，但是對生命週期有了很大的瞭解；

後續再補充相關知識，先說需求：

想獲取物件巢狀物件中的某個屬性，把值寫入render中，渲染dom

1.

2.請求到json中圖片，title ，描述  

操作如下：

componentDidMount: function () {
    var _this = this,
state=_this.state;
Core.get({
        noDomain: true,
dataType: 'jsonp'
 
,
jsonpCallback:'callback',
port: DOMAINNAME + '/v2/goods/GetGoodsDetail?access-token=' + '279a602ab4ca4d84bbc13a6ca9a714c8',
data: {
            brandCode:brandCode,
goodsType:1
},
callback: function (json) {
            if (json && json.code == 1) {
                var proList = state.proList,
 
goods = json.data.goods,
spec = this.state.spec;
for(var key in goods){
                    spec.push(goods[key]);
}

                _this.setState({
                    loading: false,
goodsTitle: json.data.goodsTitle,
banners: json.data.goodsImg,
// tags: json.data.tags,
goods: json.data.goods,
spec
 
:spec
                    /*banners: [
                        "http://www.duocaitou.com/assets/h5/build/img/integral/[email protected]","http://www.duocaitou.com/assets/h5/build/img/integral/[email protected]"
                    ]*/
});
}

render中的

render: function () {
    var tags = this.state.tags,
goods = this.state.goods,
spec = this.state.spec;
/*for(var key in goods){
        var spec = goods[key];
        for(var x in spec){
            spec[x];
        }
    }*/
    // console.log(spec[0]);
    // console.log(spec.imagePath);
       /* for (var i in goods) {
            spec.push(goods[1]);
            for(var j in spec){
                var imagePath1 = spec[j].imagePath;
            }
        }
        for (var i in goods[2]) {
            spec.push(goods[2]);
            for(var j in spec){
                var imagePath2 = spec[j].imagePath;
            }
        }*/
return (
        <section className="hotel-detail-wrap">
            <div className="top">
                <div className="goback" onTouchEnd={this.back}>
                    <span className="back"></span>
                </div>
                <div className="swiper-container" id="J_detailPics">
                    <div className="swiper-pagination ks_ts">
                        <div className="hotel-warp">
                            <img src="build/img/integral/[email protected]" alt=""/>
                        </div>
                        <div className="hotel-warp">
                            <img src="build/img/integral/[email protected]" alt=""/>
                        </div>
                        <div className="hotel-warp">
                            <img src="build/img/integral/[email protected]" alt=""/>
                        </div>
                        <div className="hotel-warp">
                            <img src="build/img/integral/[email protected]" alt=""/>
                        </div>
                        <div className="hotel-warp">
                            <img src="build/img/integral/[email protected]" alt=""/>
                        </div>
{/*{
                            <Slider type="slider" photos={this.state.banners} />
                        }*/}
                    </div>
                    <ul className="hotel-wt">
                        <li className="hotel-wt2"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div className="detail-info mar_b20">
                <div className="title">
{this.state.goodsTitle}
                </div>
                <div className="detail-tags">
                    <ul>
{
                            tags.map(function(tag){
                                return <li className="title_tag">{tag}</li>
})
                        }
                    </ul>
                </div>
            </div>
            <div className="h20"></div>
            <div className="products clearfix">
                <div className="goods-img">
                    <a href="">

//spec會隨著state狀態變化，spec列印兩次，判斷當有值時候，放入連結

                        <img src={spec[0] ? spec[0].imagePath : null} alt=""/>
                    </a>
                </div>
                <div className="goods-about">
                    <p className="title">豪華雙床房</p>
                    <p className="description">建築面積：43m;樓層:1-2樓;床型：雙人床2米；可入住：2人</p>
                    <p className="sumPoint">26000<span>積分/晚</span></p>
                    <a href="editOrder.html" className="recharge-btn">
                        <span>立即兌換</span>
                    </a>
                </div>
            </div>
            <div className="h20"></div>
            <div className="products clearfix">
                <div className="goods-img">
                    <a href="">
                        <img src="build/img/integral/[email protected]" alt=""/>
                    </a>
                </div>
                <div className="goods-about">
                    <p className="title">豪華雙床房</p>
                    <p className="description">築面積：43m;樓層:1-2樓;床型：雙人床2米；可入住：2人</p>
                    <p className="sumPoint">26000<span>積分/晚</span></p>
                    <a href="editOrder.html" className="recharge-btn">
                        <span>立即兌換</span>
                    </a>
                </div>
            </div>
        </section>
);
}