微信小程序渲染异常问题

Question

问题遇到的现象和发生背景

我通过父页面向子页面传递了一个good-id参数，在子页面利用传进来的参数调用接口，显示good-id其他详细内容，返回数据显示正常，但是渲染出现错误，完全渲染不上任何内容，而且原本应该渲染一个，现在却渲染了20个

问题相关代码，请勿粘贴截图

子页面wxml
<block wx:for="{{showdata}}" wx:for-item="itemName" wx:for-index="id" wx:key="{{index}}"> 
    <view class="box">
        <view class="firstblock">
            <image class="touxiang" src="{{itemName.image_url}}" mode="widthFix"></image>
            <view class="person">
                <view class="name">
                    <text class="showname">{{itemName.seller_name}}</text>
                </view>
                <view class="name">
                    <text class="showname2">{{itemName.good_name}}</text>
                </view>
                
            </view>
        </view>
    <view class="secondblock">
        <text class="content"> {{itemName.content}}
</text>
    </view>
    <view class="thirdblock">     
        <view  class='del' bindtap='buy'  >购买</view>
    </view>
</view>
</block>

子页面js：
data: {
        showdata:{},
        

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that=this
        
      that.setData({
        good_id:options.good_id
      })
      console.log(options.good_id)
      
      
      
      wx.showLoading({
        title: '加载中',
      })
      wx.request({
          url: getApp().globalData.server +'/index.php/Home/Goods/get_one_lol_goods', //仅为示例，并非真实的接口地址
          data: {
            good_id:options.good_id       
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          method:'POST',
          success (res) {
            console.log(res.data)
           
           if(res.data.error_code!=0){
            wx.showModal({
              title: '哎呀！',
              content: '出错了呢'+res.data.msg,
              showCancel:false,
              success (res) {}
            })
          }
          else if(res.data.error_code==0){
              that.setData({
                 showdata:res.data.data
              })
              
              console.log(that.data.showdata)  
                                                          
        }
              },
              fail:function (res) {
                wx.showModal({
                  title: '哎呀！',
                  content: '网络不在状态呢',
                  success :function (res) {
                    if(res.confirm){
                      console.log('用户点击确定')
                    }else if(res.cancel){
                      console.log('用户点击取消')
                    }
                  }
                    })
                  },
          complete:function (res) {
              wx.hideLoading()
          }
        })
        setTimeout(function(e){
          wx.hideLoading()
      },2000)



    },

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

提个建议，目前排查如果返回的数据没有问题，正常情况下根据id返回的数据就是只有一条，那就是wx:for循环那里的问题了，可以试试下面的方法一般是不会出现问题的，使用wx:for-item也需谨慎！

<block wx:for="{{showdata}}" wx:key="{{index}}"> 
    <view class="box">
        <view class="firstblock">
            <image class="touxiang" src="{{item.image_url}}" mode="widthFix"></image>
            <view class="person">
                <view class="name">
                    <text class="showname">{{item.seller_name}}</text>
                </view>
                <view class="name">
                    <text class="showname2">{{item.good_name}}</text>
                </view>
                
            </view>
        </view>
    <view class="secondblock">
        <text class="content"> {{item.content}}
</text>
    </view>
    <view class="thirdblock">     
        <view  class='del' bindtap='buy'  >购买</view>
    </view>
</view>
</block>