关于#微信小程序#的问题：为什么console可以打印出数据库数据，能打印出数据却没数据

Question

为什么console可以打印出数据库数据，但是页面却显示不正常，能打印出数据却没数据

<view class="weekCalendar" wx:if="{{Role == '超级管理员'}}">
  <weekCalendar timeBean="{{timeBean}}" bind:lastWeek="lastWeek" bind:nextWeek="nextWeek" bind:dayClick="dayClick"></weekCalendar>
  <view class="checkBody">
    <view class="view1">
      <view class="address" wx:for="{{addressList}}">{{item}}</view>
    </view>
    <view class="c9dateArrNull" wx:if="{{c9dateArr == ''}}">
      暂无数据
    </view>
    <view class="states" wx:if="{{c9dateArr != ''}}">
      <view>
        <view wx:for="{{c9dateArr}}" wx:for-item="check" class="check">
          <view class="icos">
            <view wx:for="{{check}}" class="ico">
              <view wx:if="{{(day > index || day == index) && item.state == '正常'}}" bindtap="toDetail" data-id="{{item._id}}" data-address="{{item.address}}">
                <icon type="success"></icon>
              </view>
              <view wx:elif="{{(day > index || day == index) && item.state == '异常'}}" bindtap="toDetail" data-id="{{item._id}}" data-address="{{item.address}}">
                <icon type="warn"></icon>
              </view>
              <view wx:elif="{{day > index}}" bindtap="warn">
                <icon type="cancel" color="#DC143C"></icon>
              </view>
              <view wx:elif="{{(day < index || day == index)}}" bindtap="waiting">
                <icon type="waiting" color="#C9C9C9"></icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="checkBody2" wx:for="{{otherArr}}" wx:for-index="idx">
    <view class="otheraddress">{{item.address}}</view>
    <view class="otherState" wx:if="{{otherArr[idx].state == '正常'}}" bindtap="toDetail" data-id="{{item.id}}" data-address="{{item.address}}">
      <icon type="success"></icon>
    </view>
    <view class="otherState" wx:elif="{{otherArr[idx].state == '异常'}}" bindtap="toDetail" data-id="{{item.id}}" data-address="{{item.address}}">
      <icon type="warn"></icon>
    </view>
    <view class="otherState" wx:elif="{{otherArr[idx].state == null}}" bindtap="waiting2">
      <icon type="waiting" color="#C9C9C9"></icon>
    </view>
    <view class="otherState" wx:elif="{{otherArr[idx].state == '无记录'}}" bindtap="warn">
      <icon type="cancel" color="#DC143C"></icon>
    </view>
  </view>
</view>

```javascript
data: {
    selectWeek:0,
    timeBean:{},
    c9dateArr:[], //检查项列表
    day:'',
    bool:0,
    addressList:[],
    Role:'',
    CGlist:'',
    array:'1',
    allCheck:'',
    addressList2:[],
    otherArr:[],
  },
  bl: function (e) {
    var CGlist = []
    var CGb1 = []
    var CGb2 = []
    var CGb3 = []
    var CGb4 = []
    var CGb5 = []
    var CGb6 = []
    var CGb7 = []
    var CGb8 = []
    var CGb1Zao = []
    var CGb1Zhong = []
    var CGb1Wan = []
    var CGb2Zao = []
    var CGb2Zhong = []
    var CGb2Wan = []
    var CGb3Zao = []
    var CGb3Zhong = []
    var CGb3Wan = []
    var CGb4Zao = []
    var CGb4Zhong = []
    var CGb4Wan = []
    var CGb5Zao = []
    var CGb5Zhong = []
    var CGb5Wan = []
    var CGb6Zao = []
    var CGb6Zhong = []
    var CGb6Wan = []
    var CGb7Zao = []
    var CGb7Zhong = []
    var CGb7Wan = []
    var CGb8Zao = []
    var CGb8Zhong = []
    var CGb8Wan = []
    var Role = wx.getStorageSync('Role')
    //全局变量no判断显示哪一周的记录
    var no = app.globalData.no
//获取每日检查记录
          for (let i = 0; i < addressList1.length; i++) {
            const address = addressList1[i];
            const db = wx.cloud.database()
            const _ = db.command
            db.collection('CheckRecord').orderBy('date','desc').where({
              address:address,
              date: _.gte(startDate).and(_.lte(endDate))
            }).get().then(res=>{
              var array = res.data
              array = array.reverse() //reverse() 方法用于颠倒数组中元素的顺序
              this.setData({
                array:array,
              })
              console.log(array)
                for (let j = 0; j < array.length; j++) {
                const element = array[j];
                // console.log(addressList3[0].length)
                // 将对应地点和记录进行分组
                  for (let index = 0; index < addressList3[0].length; index++) {
                    for(let i = 0; i < addressList4.length; i++){
                      if(element.address == addressList4[i] && addressList3[i][index] == element.dates){
                        addressList[i][index] = element;
                      }
                    }
                  }
                  c9dateArr = addressList3
                  this.setData({
                    c9dateArr:c9dateArr,
                  })
                  // console.log("c9dateArr:"+c9dateArr)
              }
            })
          }

```

Answer 1

【以下回答由 GPT 生成】

可能的原因是在页面渲染的过程中，数据还没有被正确地传递给页面的对应元素。以下是一些可能导致此问题的原因及相应的解决方案：

1. 数据未正确绑定到页面元素：确保数据被正确绑定到了页面中的对应元素上。可以通过在页面的onLoad或onReady生命周期函数中获取数据库数据，并将其赋值给页面的data属性中的相应变量。例如：

javascript Page({ data: { addressList: [] }, onLoad: function () { const dbData = getDatabaseData(); // 调用获取数据库数据的函数 this.setData({ addressList: dbData }); } })

1. 数据渲染的时机不正确：在微信小程序中，页面渲染是异步的，使用console.log打印数据库数据的时机可能不同于页面渲染的时机。因此，可能在console.log打印数据时，页面元素还没有被正确渲染。可以尝试在数据正确绑定到页面后，使用setTimeout等方式延迟一段时间再进行console.log。例如：

javascript Page({ data: { addressList: [] }, onLoad: function () { const dbData = getDatabaseData(); // 调用获取数据库数据的函数 this.setData({ addressList: dbData }, function () { setTimeout(function () { console.log(this.data.addressList); }, 1000); // 延迟一秒后打印数据 }); } })

1. 数据未正确传递给子组件：如果addressList是传递给子组件weekCalendar的数据，需要确保正确地将数据传递给子组件。可以在父组件的wxml中使用bind属性将数据传递给子组件，例如：

html <weekCalendar timeBean="{{ timeBean }}" addressList="{{ addressList }}" bind:lastWeek="lastWeek" bind:nextWeek="nextWeek" bind:dayClick="dayClick"></weekCalendar>

然后在weekCalendar组件的js中接收数据，并使用setData将数据绑定到对应的子组件元素上。

如果以上解决方案都没有解决该问题，可能需要进一步检查代码逻辑和调试。如果还没有头绪，可能需要将代码片段提供更多信息以便进一步诊断。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7669779
• 这篇博客你也可以参考下：玩转控制台，看看那些你不知道的Console用法

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^