收藏
回答

奇葩问题给属性渲染时出现undefined 给文本渲染又正常这是什么原因呢?

一、业务说明

点击订单列表中的某个订单后进入订单详情页,进入详情页时从后台拿到这个订单的详细数据,之后根据数据把相关信息赋值到页面

二、问题说明

拿到数据后其中有个产品id需要给显示产品的dom上赋值属性 data-id 用于点击这个dom进入到该产品的详情页 ,但是拿到的pid赋值给dta-id后再控制台显示的是undefined(实际上测试也没有这个拿到这个id)而如果把这个只显示在别的地方则能正常显示详细如下

三、代码

  1. 从后台拿到的是一个一维数组


    如图拿到的数据中存在p_id

  2. 数据拿到后修改 order    在页面输出

  3. 代码中黄色圈和控制台中黄色圈  是对应输出的东西,同样的代码在 data-id中是 undefined 而在 文本中 直接能输出1 (控制台绿色圈中 默认套餐后面的 数字1 ) 不知道为什么 ?  不管是data-id  还是 url=""  只要是属性 就不行 不知道是不是 属性赋值必须要遍历? 因为获取到的直接是一维数组  没有考虑去遍历一次。哪位大神指导原因 麻烦告知一下。

js:

// pages/myorder/details.js

var Common = require('../../utils/Common.js');

Page({


/**

  * 页面的初始数据

  */

data: {

order:{},

},


/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

let id = options.id;

let _this = this;

Common.post('Home/Wechat/getOrderDetails', { wxSession: wx.getStorageSync("third_Session"), id: id }, 'GET').then(res => {

console.log(res.data.data);

_this.setData({

order: res.data.data

});



}).catch(err => {

//console.log(err);

})

},


/**

  * 生命周期函数--监听页面初次渲染完成

  */

onReady: function () {


},


/**

  * 生命周期函数--监听页面显示

  */

onShow: function () {


},


/**

  * 生命周期函数--监听页面隐藏

  */

onHide: function () {


},


/**

  * 生命周期函数--监听页面卸载

  */

onUnload: function () {


},


/**

  * 页面相关事件处理函数--监听用户下拉动作

  */

onPullDownRefresh: function () {


},


/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function () {


},


/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {


},

//进入宝贝详情页

toGoods:function(e){

let id = e.currentTarget.dataset.id;  

wx.navigateTo({

url: '/pages/details/details?id'+id,

})

}

})


wxml:

<!--pages/myorder/details.wxml-->

<view class="content">

<view class="list adderss">

<view class="ico_1">

<image src="../../images/address.png"></image>

</view>

<view class="address-inf">

<view class="layer_1">

<text>{{order.address_user_name}}</text>

<text>{{order.address_user_phone}}</text>

</view>  

<view class="layer_2">

{{order.address_user_address}}

</view>    

</view>

</view>

<view class="list product" bindtap="toGoods" data-id="{{order.p_id}}">

<view class="product-box">

<view class="pic">

<image src="{{order.pic}}"></image>

</view>

<view class="goods-inf">

<view class="title">{{order.goods_title}}</view>

<view class="sku-inf">规格:{{order.skuname}}{{order.p_id}}</view>

<view class="buy_inf">

<text>¥{{order.p_rmb}}</text>

<text class="sum">×{{order.sum}}</text>

</view>

</view>

</view>

<view class="rmb-box">

<view class="layer_a">

<text>商品总价</text>

<text>¥{{order.p_rmb * order.sum}}</text>

</view>

<view class="layer_b">

<text>订单总价</text>

<text>¥{{order.all_rmb}}</text>

</view>

<view class="layer_c">

<text>实付金额</text>

<text class="this-font-color">¥{{order.all_rmb}}</text>

</view>

</view>  

</view>

<view class="list order-inf">

<view class="order-inf-hd">订单信息</view>

<view class="order-inf-bd">

<view class="inf-list">

<text class="title">订单备注: </text>

<text>{{order.remarks}}</text>

</view>

<view class="inf-list">

<text class="title">订单编号: </text>

<text>{{order.order_id}}</text>

</view>

<view class="inf-list">

<text class="title">支付编号: </text>

<text>{{order.pay_id}}</text>

</view>

<view class="inf-list">

<text class="title">创建时间: </text>

<text>{{order.time}}</text>

</view>

<view class="inf-list">

<text class="title">付款时间: </text>

<text>{{order.pay_time}}</text>

</view>

<view class="inf-list">

<text class="title">发货时间: </text>

<text>{{order.fh_time}}</text>

</view>

<view class="inf-list">

<text class="title">成交时间: </text>

<text>{{order.ok_time}}</text>

</view>

</view>

</view>

<view class="menu">

<block wx:if="{{order.order_state == 1}}">

<view class="menu-box">

取消订单

</view>                

</block>

<view class="menu-box this-font-color this-bd-color">

<block wx:if="{{order.order_state == 1}}">

立即支付

</block>

<block wx:elif="{{order.order_state == 2}}">

修改地址

</block>

<block wx:elif="{{order.order_state == 3}}">

确认服务

</block>

<block wx:elif="{{order.order_state == 4}}">

立即评价

</block>

</view>

</view>

</view>



最后一次编辑于  2019-12-12
回答关注问题邀请回答
收藏

2 个回答

  • Adu
    Adu
    2019-12-12

    js:

    // pages/myorder/details.js

    var Common = require('../../utils/Common.js');

    Page({


    /**

      * 页面的初始数据

      */

    data: {

    order:{},

    },


    /**

      * 生命周期函数--监听页面加载

      */

    onLoad: function (options) {

    let id = options.id;

    let _this = this;

    Common.post('Home/Wechat/getOrderDetails', { wxSession: wx.getStorageSync("third_Session"), id: id }, 'GET').then(res => {

    console.log(res.data.data);

    _this.setData({

    order: res.data.data

    });



    }).catch(err => {

    //console.log(err);

    })

    },


    /**

      * 生命周期函数--监听页面初次渲染完成

      */

    onReady: function () {


    },


    /**

      * 生命周期函数--监听页面显示

      */

    onShow: function () {


    },


    /**

      * 生命周期函数--监听页面隐藏

      */

    onHide: function () {


    },


    /**

      * 生命周期函数--监听页面卸载

      */

    onUnload: function () {


    },


    /**

      * 页面相关事件处理函数--监听用户下拉动作

      */

    onPullDownRefresh: function () {


    },


    /**

      * 页面上拉触底事件的处理函数

      */

    onReachBottom: function () {


    },


    /**

      * 用户点击右上角分享

      */

    onShareAppMessage: function () {


    },

    //进入宝贝详情页

    toGoods:function(e){

    let id = e.currentTarget.dataset.id;  

    wx.navigateTo({

    url: '/pages/details/details?id'+id,

    })

    }

    })


    2019-12-12
    赞同
    回复
  • 王志鹏
    王志鹏
    2019-12-12

    发个代码片段看看???

    2019-12-12
    赞同
    回复 9
    • Adu
      Adu
      2019-12-12
      2019-12-12
      回复
    • Adu
      Adu
      2019-12-12
      貌似不全  我重新编辑
      2019-12-12
      回复
    • Adu
      Adu
      2019-12-12回复Adu
      把代码放到正文了
      2019-12-12
      回复
    • 王志鹏
      王志鹏
      2019-12-13回复Adu
      应该是异步的问题   你这个不是遍历的时候给data-id赋值    所以页面会先加载元素  这个时候order 还没有值 order .p_id就为 然后undefined 


      然后this.setData生效  赋值成功  内容加载为正常
      2019-12-13
      回复
    • Adu
      Adu
      2019-12-13回复王志鹏
      谢谢你的回答,有类似的情况有什么简单的解决方式没有?
      2019-12-13
      回复
    查看更多(4)
登录 后发表内容
问题标签