react 中随state状态改变，数据在dom中渲染问题

Z时代
2024-01-10
分类：综合

react

初遇react，问题不断，react生命周期变化，会随着setState状态改变，昨天遇到个问题，处理到晚上10点，虽然自己琢磨未果，但是对生命周期有了很大的了解；

后续再补充相关知识，先说需求：

想获取对象嵌套对象中的某个属性，把值写入render中，渲染dom

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>
    );
}